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

您的CSS正在做的是定位<{1}} 内部 .ContentText p - 这些内容并不存在。

您的#ServicesLink超出了CSS范围。 vanilla CSS中没有办法将选择器作为其父级之外的目标。

JavaScript是您网页上范围元素的唯一有价值的解决方案。

这是什么目的或目的，所以我们可以给你一个更好的答案？

更新：更新了答案。

在JS中，您可以执行以下操作：

.ContentText

DEMO

Answer 2

您可以通过为大型服务声明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);
        });

});

Answer 3

目前你无法使用CSS。

您必须使用JavaScript。

CSS Hover效果在其他地方改变文本样式

3 个答案: