html - on Hover 同时设置 DIV 和 P 的样式

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>s 类，然后为孩子设置样式。

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);
}

工作小提琴就在这里！

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
});
});