gpt4 book ai didi

html - 越来越接近我想要实现的确切 CSS 悬停,但需要更多帮助

转载 作者:太空宇宙 更新时间:2023-11-03 23:17:30 26 4
gpt4 key购买 nike

我进一步根据成员的建议对其进行了调整。我现在正试图弄清楚悬停状态的这个新 CSS 设置,是什么导致文本下沉这么多?我弄乱了行高,但这似乎也缩小和缩放了背景图像......?

我正在尝试在 css 悬停上获得准确的 css 定位,就像导航栏按钮正常向上状态一样。只是一个“颜色翻转”。

在进一步检查鼠标悬停在每个按钮的“弹起状态”上时,我注意到当我将鼠标悬停在按钮的文本链接部分时会发生悬停。我希望整个按钮区域都可以点击。我必须弄清楚为什么这也没有发生。

感谢帮助

这是我目前所拥有的...

例子:

http://visionsic.github.io/DSW_II/test.html

CSS 和 HTML 代码:

#aside_sect_mm {
margin: 0%;
background-position: 0%;
background-color: #004E27;
max-width: 704px;
max-height: 100px;
background-repeat: no-repeat;
position: relative;
}
#aside_sect_mm nav {
text-align: center;
max-width: 704px;
width: 100%;
max-height: 100%;
margin-top: 0%;
display: block;
position: absolute;
}
#aside_sect_mm nav:after {
content: "";
display: table;
clear: both;
}
#aside_sect_mm nav ul {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
position: relative;
}
#aside_sect_mm nav ul li {
font-size: 1.1em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: lighter;
text-align: center;
list-style: none;
line-height: 1.1em;
position: absolute;
padding: 6.5% 0% 0% 0%;
height: 100px;
width: 60px;
color: #FCE011;
display: inline-block;
float: left;
min-width: 20%;
background-color: #004E27;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
position: relative;
max-height: 100px;
max-width: 60px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 100px 40px;
display: block;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
clear: left;
position: relative;
display: block;
max-height: 60px;
text-decoration: none;
color: #F6EF1B;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
position: relative;
display: block;
background-repeat: no-repeat;
background-color: #F6EF1B;
background-size: 100% 50%;
text-decoration: none;
line-height: 2em;
margin-top: -47px;
padding-top: 50px;
color: #004E27;
overflow: hidden;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>nav bar test</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
</head>

<body>
<section id="aside_sect_mm">
<nav>
<ul>
<li class="bio_icon"><a href="#bio">Bio</a>
</li>
<li class="stat_icon"><a href="#stats">Stats</a>
</li>
<li class="img_icon"><a href="#images">Images</a>
</li>
<li class="vid_icon"><a href="#videos">Videos</a>
</li>
<li class="fut_icon"><a href="#future">Future</a>
</ul>
</nav>
</section>

</body>

</html>

最佳答案

你把它复杂化了。 css 悬停可以应用于 LI 而不是 A:

Example如果代码片段不起作用

svg/fut_ore_ylw.svg #aside_sect_mm {
margin: 0%;
background-position: 0%;
background-color: #004E27;
max-width: 704px;
max-height: 100px;
background-repeat: no-repeat;
position: relative;
}
#aside_sect_mm nav {
text-align: center;
max-width: 704px;
width: 100%;
max-height: 100%;
margin-top: 0%;
display: block;
position: absolute;
}
#aside_sect_mm nav:after {
content:"";
display: table;
clear: both;
}
#aside_sect_mm nav ul {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
position: relative;
}
#aside_sect_mm nav ul li {
font-size: 1.1em;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: lighter;
text-align: center;
list-style: none;
line-height: 1.1em;
position: absolute;
padding: 6.5% 0% 0% 0%;
height: 100px;
width: 60px;
color: #FCE011;
display: inline-block;
float: left;
min-width: 20%;
background-color: #004E27;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon, #aside_sect_mm nav ul li.stat_icon, #aside_sect_mm nav ul li.img_icon, #aside_sect_mm nav ul li.vid_icon, #aside_sect_mm nav ul li.fut_icon {
position: relative;
max-height: 100px;
max-width: 60px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 100px 40px;
display: block;
overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
background-image: url(http://visionsic.github.io/DSW_II/svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
background-image: url(http://visionsic.github.io/DSW_II/svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
background-image: url(http://visionsic.github.io/DSW_II/svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
background-image: url(http://visionsic.github.io/DSW_II/svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
background-image: url(http://visionsic.github.io/DSW_II/svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a, #aside_sect_mm nav ul li.stat_icon a, #aside_sect_mm nav ul li.img_icon a, #aside_sect_mm nav ul li.vid_icon a, #aside_sect_mm nav ul li.fut_icon a {
clear: left;
position: relative;
display: block;
max-height: 60px;
text-decoration: none;
color: #F6EF1B;
overflow: auto;
}
#aside_sect_mm nav ul li:hover {
background-color: #F6EF1B;
}
#aside_sect_mm nav ul li:hover a {
color: #004E27;
cursor:pointer;
}
#aside_sect_mm nav ul li.bio_icon:hover {
background-image: url(http://visionsic.github.io/DSW_II/svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon:hover {
background-image: url(http://visionsic.github.io/DSW_II/svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon:hover {
background-image: url(http://visionsic.github.io/DSW_II/svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon:hover {
background-image: url(http://visionsic.github.io/DSW_II/svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon:hover {
background-image: url(http://visionsic.github.io/DSW_II/svg/fut_ore_grn.svg);
}
<section id="aside_sect_mm">
<nav>
<ul>
<li class="bio_icon"><a href="#bio">Bio</a>

</li>
<li class="stat_icon"><a href="#stats">Stats</a>

</li>
<li class="img_icon"><a href="#images">Images</a>

</li>
<li class="vid_icon"><a href="#videos">Videos</a>

</li>
<li class="fut_icon"><a href="#future">Future</a>
</li>
</ul>
</nav>
</section>

关于html - 越来越接近我想要实现的确切 CSS 悬停,但需要更多帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29898304/

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