Question

<div class="product">
 <div class="image">
   <div class="mainimage"></div>
   <div class="secondimage"></div>
 </div>
 <div class="productdescription"></div>
</div>

在productdescription类的鼠标悬停时，我想在secondimage类上应用 display：block 。我该怎么做？

Answer 1

在纯CSS中，没有一种方法可以使用您拥有的结构来完成此操作，因为一般规则CSS会避免“遍历” DOM节点树的任何选择器以避免复杂性。但是，如果您像这样交换订单：

<div class="product">
 <div class="productdescription"></div>
 <div class="image">
   <div class="mainimage"></div>
   <div class="secondimage"></div>
 </div>
</div>

然后，您应该可以使用Adjacent Sibling selector

进行以下操作

.productdescription:hover + .image .secondimage{
    display:block;
}

.productdescription:hover + .image .secondimage{
    display:block;
    color:red;
}

<div class="product">
 <div class="productdescription">Product Description</div>
 <div class="image">
   <div class="mainimage">Main Image</div>
   <div class="secondimage">Second Image</div>
 </div>
</div>

或者，如果需要保留结构，则需要一些JavaScript / jQuery。

$(".productdescription").hover(function(){
    $(this).parent().find(".image .secondimage").toggleClass("hoverActive")
});

.secondimage.hoverActive{
    display:block;
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
 <div class="image">
   <div class="mainimage">Main Image</div>
   <div class="secondimage">Second Image</div>
 </div>
  <div class="productdescription">Product Description</div>
</div>

Answer 2

我想您需要一些JavaScript和jQuery来做到这一点。

在每个要与之交互的div中添加一个ID后：

$('#productDescription').hover(function(){
    $('#secondImage').css("display","block");
});

我不知道这是否是您要的东西，但是它有用。

如何在子标签的子标签上应用样式？

2 个答案: