gpt4 book ai didi

html - 没有 Javascript 的悬停选项卡

转载 作者:太空宇宙 更新时间:2023-11-04 04:11:24 26 4
gpt4 key购买 nike

我能够使用纯 HTML 和 CSS 创建标签。相关代码如下:

<!DOCTYPE HTML>
<html>
<head>

<style>
div.tabbed {
position: relative;
font-size: 0;
}

div.tabbed > a {
display: inline-block;
padding: .5em;
font-size: 16px;
border-radius: 3px 3px 0 0;
background-color: #333;
color: #eee;
text-decoration: none;
line-height: 1em;
}

div.tabbed > a + a {
margin-left: .5em;
}

div.tabbed > a:target {
color: #333;
background-color: #eee;
}

div.tabbed > a > div {
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: .5em;
border-radius: 0 3px 3px 3px;
display: none;
color: #333;
background-color: #eee;
}

div.tabbed > a:target > div {
display: block;
}
</style>

</head>
<body>

<div class="tabbed">
<a href="#dog" id="dog">
Dog h jh
<div>
<p>This is a dog...</p>
</div>
</a>
<a href="#cat" id="cat">
Cat
<div>
<p>This is a cat...</p>
</div>
</a>
<a href="#foo" id="foo">
Foo
<div>
<p>This is a foo...</p>
</div>
</a>
<a href="#newshop" id="newshop">
New Shop
<div>
<p>This is a New Shop...</p>
</div>
</a>
</div>
</body>
</html>

目前在点击事件中我能够看到选项卡的内容。是否有可能在悬停时获得同样的效果? [请注意:我没有使用任何 javascript,纯 HTML5 和 CSS3]请建议。

最佳答案

是的,这是可能的。检查这个hover tab

div.tabbed > a:hover > div {
display: block;
}

关于html - 没有 Javascript 的悬停选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20607385/

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