Question

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

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

场景：image1 | text1 image2 | text2 image3 | text3 如果用户悬停图像1，我应该对图像和图像3的图像和文本1相同链接到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>

在悬停

2 个答案: