Question

我使用这种悬停效果，除了悬停的元素之外，所有其他东西都会淡出，您可以在下面的代码段中看到它。

它可以在Firefox（版本66.0.3）中运行，但不能在Chrome（版本73.0.3683.103）中运行。我也尝试过Microsoft Edge，它也可以在这里工作。

我尝试添加“ -webkit-”，因为我读到这可以解决问题，但事实并非如此。有人知道如何在Chrome中实现这种悬停效果吗？

.links{
  font-weight: bold;
  font-size: 20px;
}

/* Hover Effect */
.hover {
  visibility: hidden;
}

.hover > * {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover > * {
  opacity: 0.3;
}

.hover > *:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

编辑： 如果我删除了链接（在我的情况下是对网站其他页面的引用），它就可以在Chrome浏览器中工作。

在Chrome中工作：

.links {
  font-weight: bold;
  font-size: 20px;
}


/* Hover Effect */

.hover {
  visibility: hidden;
}

.hover>* {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover>* {
  opacity: 0.3;
}

.hover>*:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

<div class="links">
  <div class="hover">
    <div class="linkNav">1</div>
    <div class="linkNav">2</div>
    <div class="linkNav">3</div>
  </div>
</div>

在Chrome中不起作用：

.links {
  font-weight: bold;
  font-size: 20px;
}


/* Hover Effect */

.hover {
  visibility: hidden;
}

.hover>* {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover>* {
  opacity: 0.3;
}

.hover>*:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

<div class="links">
  <div class="hover">
    <a href="1.html">
      <div class="linkNav">1</div>
    </a>
    <a href="2.html">
      <div class="linkNav">2</div>
    </a>
    <a href="3.html">
      <div class="linkNav">3</div>
    </a>
  </div>
</div>

Answer 1

（注：在注意到HTML问题之后，我已经更新了此答案）。

我简化了CSS以尝试解决问题（我删除了> *选择器并没有做任何事情的可见性属性）

在这种情况下，存在不可预测的行为不足为奇，因为严格来说，您不应该在<div>元素内放置诸如<a>之类的块级元素。

在这种HTML格式错误的情况下，Chrome不会识别锚点（<a>）标签的不透明度值，除非我将其设置为display: block或{{1 }}。无论如何，FireFox，Edge和IE都能识别不透明度。

最好的解决方案是修复HTML，以便块级元素正确包装内联元素。

display:inline-block

.links {
  font-weight: bold;
  font-size: 20px;
}

.hover:hover a {
  opacity: 0.3;
}

.hover a:hover {
  opacity: 1;
}

我建议像这样修复它，但是如果由于某些原因您无法修复HTM，一种解决方法是在锚标记上设置<div class="links hover"> <div class="linkNav"><a href="1.html">1</a></div> <div class="linkNav"><a href="2.html">2</a></div> <div class="linkNav"><a href="3.html">3</a></div> </div>属性。像这样：

display

.links {
  font-weight: bold;
  font-size: 20px;
}

.links a {
  display:block;
}

.hover:hover a {
  opacity: 0.3;
}

.hover a:hover {
  opacity: 1;
}

否则，替代解决方案是您可以简单地将替代元素作为目标，例如内部<div class="links hover"> <a href="1.html"><div class="linkNav">1</div></a> <a href="2.html"><div class="linkNav">2</div></a> <a href="3.html"><div class="linkNav">3</div></a> </div>而不是div标签。

JSFiddle链接提供了不同的解决方法解决方案和演示该问题的原始CVE（可用于在不同的浏览器中进行测试）：

Solution by setting display block

Solution by changing selector to target inner div

Original CVE which works in most browsers but not Chrome

Answer 2

我已更正代码这里的问题是您添加HTML的顺序

一个标签中包含div，并在其上分类，将鼠标悬停在选择器上无法到达的标签上。

现在看看，它工作正常。我猜就是这个。希望它能解决您的问题。

.links {
  font-weight: bold;
  font-size: 20px;
}


/* Hover Effect */

.hover {
  visibility: hidden;
}

.hover>* {
  visibility: visible;
  transition: opacity 100ms linear 100ms;
}

.hover:hover>* {
  opacity: 0.3;
}

.hover>*:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}

<div class="links">
  <div class="hover">
    <a href="1.html" class="linkNav">1</a>
    <a href="2.html" class="linkNav">2</a>
    <a href="3.html" class="linkNav">3</a>
  </div>
</div>

淡出所有内容，但悬浮链接在Chrome中不起作用

2 个答案: