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

我进一步根据成员的建议对其进行了调整。我现在正试图弄清楚悬停状态的这个新 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/

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

上一篇：jquery - 如何缩放图像以获得一致的图像大小

下一篇：javascript - 创建一个移动栏(在导航栏内)移动到用户悬停的元素？