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 {background-color：yellow; }

但似乎不起作用。

帮助多了许多

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来获取所有内容。

当图像悬停时，css会影响一个div

2 个答案: