Javascript 悬停时设置两个div的样式

嗨，我是新到前端，所以请原谅我，如果这是一个天真的问题

我试图在div上实现一个简单的阴影效果 如果用户第一次悬停，第二次俯冲也应该有阴影效果

场景：图像1 |文本1图像2 |文本2图像3 |文本3 若用户将鼠标悬停在image1上，我应该在image2和Image3的image1和text1上设置boreder 链接到代码笔：

我试过两件事，试着在一次潜水时保持image2 | text2，但没有成功 并希望它响应

Css:

重新措辞问题：

   <div class="trio">
        <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
            <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"/>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
            </p>
            </a>
        </div>
 </div>

---

若我停留在trio border上，那个么应该是我在评论之前提到的trio类

，HTMl结构中也存在问题。所以我也解决了这个问题<代码>标签在错误位置启动和关闭

但是现在它被修复了

玩得开心

已更新

HTML

    <div class="trio">
              <a href="index.php?rt=product/category&path=68">
                <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
               <img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400" title="GOLD" />
            </div>
            <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
              </p>
            </div>
          </a>
        </div>

---

使用jquery或javascript实现更智能的方式。我知道你是新的前端，所以只是做了一些简单的改变

   <div class="row">
    <div class="trio">
        <div id="gold_trio"  class="div_trio">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
            </div>
        </div>
        <div id="silver_trio" class="div_trio">
             <div class="col-lg-4 col-md-4 col-sm-6">
                  <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
              </div>
      </div>

        <div id="user_trio"  class="div_trio">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
            </div>
      </div>
    </div>
</div>

}

其余由jquery完成

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".div_trio").hover(function () {
            $(this).css("box-shadow", "0 0 10px black");
        }, function () {
            $(this).css("box-shadow", "none");
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.div_trio”）.悬停（函数（）{
$（this.css（“框阴影”，“0 0 10px黑色”）；
}，函数（）{
$（this.css（“框阴影”、“无”）；
});
});

谢谢prince，但我想要一个包含图像和文本的边框，现在它将图像边框为一个单独的框，然后p标记单独的框，因此如果您将鼠标悬停在图像1上，边框应为图像1和文本1。好的，我知道了。你的HTML被破坏了，我需要再次修改它，请你上传图片作为工作示例。paraghraph应该在图像旁边，所以它的3个图像和文本在rowyaa我有你的代码笔代码。但它看起来并不正确。它看起来像（这张图片将持续10分钟）。你可以使用任何250*250像素的图像，然后在每个图像旁边有一行文本，我猜如果你点击图像，它就会出现，因为锚定标记和路径设置为本地

   <div class="row">
    <div class="trio">
        <div id="gold_trio"  class="div_trio">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
            </div>
        </div>
        <div id="silver_trio" class="div_trio">
             <div class="col-lg-4 col-md-4 col-sm-6">
                  <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
              </div>
      </div>

        <div id="user_trio"  class="div_trio">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
            </div>
      </div>
    </div>
</div>

 .trio img {
padding: 1px;
max-width: 250px;
width: 100%;
height: auto;
text-align:center;
float:left;

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".div_trio").hover(function () {
            $(this).css("box-shadow", "0 0 10px black");
        }, function () {
            $(this).css("box-shadow", "none");
        });
    });
</script>