Question

我想在span a内改变div的不透明度，而<div id="about"> <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a> </div>所有这一切都在其中。

HTML：

.hover-text {
  opacity: 0;
}

#about:hover {
  change .hover-text opacity to 1
}

CSS：

from scipy.stats import norm
prob = norm.pdf(0.5, m, s)

import sys
sys.stdin.readline()
print(sys.stdinreadin())

def input:
    print("Enter any value")

这可以用纯CSS吗？

Answer 1

它只适用于子元素。

例如 .about类具有子跨度，然后它将起作用

.about:hover .hover-text {
  opacity: 0;
}

＆＃13;

.about{
  border:1px solid black;
}
.hover-text{
  opacity: 0;
  font-size:30px;
}
.about:hover .hover-text {
  opacity: 1;
}

＆＃13;

<div class="about">
  <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a>
</div>
CSS:

＆＃13;

Answer 2

是的，它可能。只需使用正确的选择器

＆＃13;

.hover-text {
  opacity: 0;
}
#about:hover .hover-text {
  opacity: 1;
}

＆＃13;

<div id="about">
  <a style="text-decoration: none;" href="#"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a>
</div>

＆＃13;

Answer 3

.hover-text {
  opacity: 0;
}
#about a:hover .hover-text {
  opacity: 1;
}

Answer 4

将像h1这样的块级元素放在像a这样的内联元素中是无效的。

要修复您的情况，请使用以下代码：

#about:hover .hover-text {
    opacity: 1;
}

.hover-text {
  opacity: 0;
}

#about:hover .hover-text {
    opacity: 1;
}

<div id="about">
  <a style="text-decoration: none;" href="/about">
        <h1>ABOUT ME</h1>
        <br>
        <span class="hover-text">test</span>
    </a>
</div>

Answer 5

#about:hover .hover-text{
  opacity: 1
}

Answer 6

  .about：hover＆gt; .hover-text {＆＃xA;不透明度：0;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

'>'用于为该特定子类应用css

＆ #xA;

Answer 7

这是你正在寻找的吗？

#about:hover .hover-text{
   opacity: 1;
}

Codepen link

Answer 8

你的问题似乎有点令人困惑。据我所知，当你悬停#about时，你想隐藏.hover-text

这可以在纯CSS中完成，如下所示：

.hover-parent:hover .hover-text{
    opacity: 0;
}

这不仅仅适用于div（只需确保添加.hover-parent类）

更改on div中的span的不透明度：悬停

8 个答案: