Question

我无法理解如何做到这一点，但我正在尝试设置我的样式，所以在悬停时，它同时突出显示单独的元素。

<ul class="small-block-grid-1 large-block-grid-4">
  <li>
    <img class="th" src="test.png"/>
       <p class="th1">Test Caption</p>
  </li>
</ul>

.th:hover, .th1:hover {
    -webkit-box-shadow: 0 0 6px 1px rgba(43, 166, 203, 0.5);
    box-shadow: 0 0 6px 1px rgba(43, 166, 203, 0.5);
}

有没有办法说悬停做这个条件和其他条件？因为上面的内容是针对任何一个项目，而这个项目已悬停但不是全部！

Answer 1

如果所有元素都是您悬停在其上的父元素的子元素，则为：

.th:hover div1 { background: red; ... }
.th:hover div2 { background: tomato; ... }

至少，这就是我对这个问题的理解。

Answer 2

这个CSS技巧会有魅力，

将一个类应用于<li>，因为它包装了您想要应用的所有内容。然后将:hover应用于<li>的类，然后为子项设置样式。

HTML：

<ul class="small-block-grid-1 large-block-grid-4">
    <li class="wrapper">
        <img class="th" src="test.png" />
        <p class="th1">Test Caption</p>
    </li>
</ul>

CSS：

.wrapper:hover .th, .wrapper:hover .th1{
    -webkit-box-shadow: 0 0 6px 1px rgba(43, 166, 203, 0.5);
    box-shadow: 0 0 6px 1px rgba(43, 166, 203, 0.5);
}

工作Fiddle is here！

Answer 3

如果元素是孩子，那么请查看以前的答案。如果他们不是，你可以做一些JS。以下是您可以重复使用的简单示例：

http://jsfiddle.net/au89a/

<h1>My header</h1>
<div>My First Div</div>
<div>My second Div</div>


$("h1").mouseover(function() {
$("div").each(function(index, elem) {
    $(this).css("border","1px solid black"); // do whatever you want here
});
});

$("h1").mouseout(function() {
$("div").each(function(index, elem) {
    $(this).css("border",""); // do whatever you want here
});
});

在Hover上同时设置DIV和P的样式

3 个答案: