在悬停时设置两个 div 样式

Question

您好，我是前端新手，所以如果这是一个幼稚的问题，请原谅我。

我正在尝试在 div 上实现一个简单的阴影效果 如果用户悬停第一个，第二个潜水也应该有阴影效果

场景：image1|text1 image2|text2 image3|text3 如果用户悬停 image1，我应该对 image2 和 image 3 相同的 image 和 text1 感到厌烦 链接到codepen：http://codepen.io/rahulv/pen/xOZVzr

我尝试了两件事尝试将 image2|text2 保持在单次潜水中，但没有奏效 并希望它响应

CSS：

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

改写问题：

   <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>

如果我将鼠标悬停在三重奏边框上，则应该出现在三重奏类

Answer 1

我在评论之前提到过 HTMl 结构也存在问题。所以我也解决了这个问题。 a 标签在错误位置开始和结束

但现在它已修复

玩得开心。

更新

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>

CSS

  .trio img {
    padding: 1px;
    text-align: center;
    float: left;
  }

  .trio {
    overflow: hidden;
  }

  .trio:hover {
    border: solid 1px red;
  }

Answer 2

使用 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>

只需将这段代码用于 css

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

}

其余由 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>