当 img 悬停时，css 影响一个 div

Question

我四处搜索并看到了一些如何完成的示例，但我并没有真正理解它并尝试了所有方法但都没有奏效，所以我想问一下是否有人可以向我展示我下面的代码，当 img 悬停时，我如何影响 tournytitle？

<div id="upevents" class="righty">
    <div>
        <div class="tournytitle">
        <div style="font-weight: bold;">Test 2 Hat</div>
        <div style="color: #888888; font-size: 10px;">17 . 12 . 2011</div>
        </div>
        <img src="/images/tourny/jomjom2.jpg" />
    </div>
    <div>
        <div class="tournytitle">
        <div style="font-weight: bold;">Test 1 Hat</div>
        <div style="color: #888888; font-size: 10px;">12 . 12 . 2011</div>
        </div>
        <img src="/images/tourny/bane5.jpg" />
    </div>
</div>

我应该如何为此编写我的 css 代码？

我试过类似的东西

.upevents img:hover + #tournytitle { 背景颜色:黄色；

但似乎不起作用。

非常感谢帮助

Answer 1

如前所述，您的 .tournytitle 类必须是您尝试翻滚的 img 的子类。你的代码 .upevents img:hover + #tournytitle { background-color: yellow; 肯定很接近，你只需要弄清楚如何遵守上述规则。有了这个你说 .tournytitle 是 img 的相邻 child ，这在你给定的代码中不是这种情况。此外，您的类和标识符号不正确，请注意这一点。

我设法通过切换 .tournytitle 和 img 让你的代码工作，这样这个类现在是相邻的兄弟 - http://jsfiddle.net/gmwjw/1/ - 我知道这可能不是您要找的设计，但它是一个开始。

这可能对您有帮助 - http://meyerweb.com/eric/articles/webrev/200007a.html