Question

我有一个页面，我有一个可以直接遵循的链接。但是，当用户将鼠标悬停在链接上时，我想显示由16px x 16px图标指示的备用外部链接。以下在Firefox和IE中完美运行。但是，在Chrome中，只要我不再悬停在普通链接上，备用链接就会消失。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  span.inner {
    margin-left: 8px;
    visibility: hidden;
  }

  span.outer:hover > span.inner {
    visibility: visible;
  }
  </style>
</head>
<body>
<span class="outer">
    <a href="foo/bar">Always Visible</a>
    <span class="inner">
        <a href="foo/baz">
            <img src="external.png" alt="baz" />
        </a>
    </span>
</span>
</body>
</html>

我会做出哪些更改，或者我将如何以不同方式编写内容，以便在所有 3浏览器中获得预期的效果？

根据我选择的答案进行跟进解决方案：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  a.inner {
    margin-left: 8px;
    visibility: hidden;
  }

  div.outer:hover > a.inner {
    visibility: visible;
  }
  </style>
</head>
<body>
  <div class="outer">
    <a href="foo/bar">Always Visible</a>
    <a class ="inner" href="foo/baz">
      <img src="external.png" alt="baz" />
    </a>
  </div>
</body>
</html>

Answer 1

默认情况下.outer是一个内联元素，因为它是一个范围。内联元素不包含其他元素。您可以使用div来实现所需的效果，因为div是块级元素。你也可以设置.outer来显示：block。

.outer {
    display: block;
}

Chrome与IE / Firefox中的CSS悬停效果不一致

1 个答案: