gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:42:11 26 4
gpt4 key购买 nike

我有一个页面,其中有一个可以直接点击的链接。但是,当用户将鼠标悬停在链接上时,我想显示一个由 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>

最佳答案

默认情况下,.outer 是一个内联元素,因为它是一个跨度。内联元素并不意味着包含其他元素。您可以使用 div 来实现所需的效果,因为 div 是 block 级元素。您也可以将 .outer 设置为显示: block 。

.outer {
display: block;
}

关于html - Chrome 与 IE/Firefox 中的 CSS 悬停效果不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23896074/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com