html - CSS 悬停效果改变其他地方的文本样式

Question

背景

我希望能够将鼠标悬停在一个链接上，并且一组文本会在此操作中淡出

HTML

<nav class="PageNav">
<ul>
    <li id="HomeLink"><a href="http://www.example.com">Home</a></li>
    <li id="OverviewLink"><a href="http://www.example.com/overview">Overview</a></li>
    <li id="ServicesLink">
        <a href="http://www.example.com/services">Mega Services</a>

        <ul class="PageSubNav">
            <li><a href="http://www.example.com/services/subpage">Subpage 1</a></li>
            <li><a href="http://www.example.com/services/subpage">Subpage 2</a></li>
            <li><a href="http://www.example.com/services/subpage">Subpage 3</a></li>
            <li><a href="http://www.example.com/services/subpage">Subpage 4</a></li>
            <li><a href="http://www.example.com/services/subpage">Subpage 5</a></li>
            <li><a href="http://www.example.com/services/subpage">Subpage 6</a></li>
        </ul>

    </li>
    <li id="GalleryLink"><a href="http://www.example.com/gallery">Gallery</a></li>
    <li id="VideoLink"><a href="http://www.example.com/video">Video</a></li>
    <li id="ContactLink"><a href="http://www.example.com/contact">Contact</a></li>
</ul>
</nav>

  <article class="ContentText">
       <p>text</p>
       <p>dummy text</p>
       <p>Dummy text, dummy text, dummy text, dummy text, <strong>3 Paragraphs, Roughly 209 Words</strong></p>
  </article>

CSS

#ServicesLink:hover .ContentText p {
     color: rgba(255,255,255,0.5);
}

我在思考这个问题时遇到了麻烦，这就是我所拥有的但无济于事。

想法是，当将鼠标悬停在“大型服务”选项卡上时，文章部分中包含的文本会消失。

Answer 1

您可以通过为大型服务声明 opacity:0 来做到这一点(我想是 id ServicesLink)。或者，如果你想让它更流畅，你可以使用 jQuery:

$("#id_where_you_hover").hover(function(event){
  $("#id_that_you_want_to_fade_out").fadeOut(1000, function () {
            $(this).html("here you put something to replace if you want").fadeIn(2000);
        });

});