css在img悬停时影响一个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：悬停+#tournytitle｛背景颜色：黄色；｝

但似乎不起作用。

帮助更多相关的

Answer 1

如前所述，您的.tournytitle类必须是您尝试回滚的img的子级。您的代码.upevents img:hover + #tournytitle { background-color: yellow; }当然很接近，您只需要弄清楚如何遵守上面的规则。你说.tournytitle是img的相邻子代，但在给定的代码中情况并非如此。此外，您的类和id符号不正确，请注意。

我通过切换.tournytitle和img使您的代码正常工作，使该类现在成为相邻的同级-http://jsfiddle.net/gmwjw/1/-我意识到这可能不是你想要的设计，但这只是一个开始。

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

Answer 2

.tourneytitle必须是img元素的子元素才能实现这一点。这个小提琴展示了将鼠标悬停在.tournytitle上显示图像的方式：http://jsfiddle.net/fWxH3/203/

要获得您想要的内容，您需要更改HTML，使您的tournytitle div成为img标记的子级。也许您可以在图像标签中使用span，而不是对所有内容都使用div。