Question

好的，这是html和css3

<div id="sitename">
    <div class="logo">
    <a class="home" href="#"><img src="logo.png" /></a>
    </div>
    <span class="someclass"><a class="home" href="#">Home</a></span>
    <span class="recharger">Some text</span>
    <span class="reload">Some other text</span>
</div>

.reload {
    position: absolute;
    top: 70px;
    left: 181px;
    width: 140px;
    -webkit-transition: opacity;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: opacity;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: opacity;
    -o-transition-duration: 400ms;
    -o-timing-function: ease-out;
    transition: opacity;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    opacity: 0;
    filter:alpha(opacity=0);
}
??? {
    opacity: 1 !important;
    filter:alpha(opacity=100) !important;
}

当我将鼠标悬停在.home（2个地方）时，我想显示.reload中的文字。我该怎么替换???用？

谢谢

Answer 1

使用CSS，您需要嵌套元素，例如：

<a class="home" ...><span class="reload">...</span></a>

然后你可以使用这样的CSS：

a.home:hover .reload { opacity: 1 !important; ... }

否则你将不得不使用JavaScript来解决这个问题。您可以在jQuery中轻松完成此操作：

$('a.home').hover(function () {
  $('.reload').css('opacity',1);
  $('.reload').css('filter','alpha(opacity=100)');
});

Answer 2

最接近你想要的是一般兄弟组合~，但元素（ .home和.reload ）必须在同一个巢中水平

所以如果你的html

<div id="sitename"> <a class="logo home" href="#"><img src="logo.png" /></a> <a class="someclass home" href="#">Home</a> <span class="recharger">Some text</span> <span class="reload">Some other text</span> </div>

适当的css将是

.home:hover ~ .reload{ opacity: 1 !important; filter:alpha(opacity=100) !important; }

引用General sibling selector ^{MDC reference}

~ 组合子将两个分开选择器和匹配第二个元素只有在前面有首先，两者都有一个共同的父母。

需要帮助CSS3

2 个答案: