Question

我试图在导航菜单中向上移动文本以显示文本所在的小图像。用我当前的代码，图像出现在上移的文本下方。我是否需要制作一个单独的CSS元素以将图像悬停在文字下方？这是我所拥有的：

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: right;
        box-shadow: 0 0 25px 0 black;
    }
    
    footer * {
        display: inline;
    }
    
    text {
        list-style-type: none;
        margin: 1px;
        padding: 10px;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        right: 0;
        width: 50%;
        z-index: 2;
    }
    
    footer li {
        margin: 10px;
    }
    
    footer li a {
        color: orange;
        font-size: 1.25em text-shadow: 2px 2px 4px #000000;
    }
    
    footer li a:hover {
        position: relative;
        top: -.625em;
        /* shifts navigation element up half the font size on hover */
        background-image: url("../images/fish.png");
        background-position: 50 100;
        background-repeat: no-repeat;
    }

<footer>
    <nav>
        <text>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Schedule</a></li>
            <li><a href="#">Contact</a></li>
        </text>
    </nav>
</footer>

Answer 1

尝试将其添加到悬停样式

padding-bottom: 50px;
width: auto;
height: 80px;

这将消除“闪烁”效果。当您悬停的文字“滑出”您悬停的框时。

Answer 2

我相信这就是您要尝试的事情。

您确实有几个HTML问题。您不能拥有不是li的直接子代的ul。

第二，您在代码中缺少一个分号，该分号使文本阴影无法显示。

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: right;
  box-shadow: 0 0 25px 0 black;
}

footer * {
  display: inline;
}

ul {
  list-style-type: none;
  padding: 0;
  display: block;
}

text {
  margin: 1px;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50%;
  z-index: 2;
}

footer li {
  display: inline-block;
  vertical-align: bottom;
}

footer li a {
  color: orange;
  font-size: 1.25em;
  text-shadow: 2px 2px 4px #000000;
  display: block;
  vertical-align: bottom;
}

footer li a:hover {
  padding-bottom: .625em;
  /* shifts navigation element up half the font size on hover */
  background-position: 50 100;
  background-repeat: no-repeat;
}

footer li a span {
  background: white
}

footer li {
  background-image: url("https://images.freeimages.com/images/large-previews/bad/fish-1372481.jpg");
}

<footer>
  <nav>
    <text>
    <ul>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>About</span></a></li>
        <li><a href="#"><span>Schedule</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
     </ul>
     </text>
  </nav>
</footer>

我所做的是将负边距更改为底部填充，因此元素仍然向上移动，但实际上并未更改位置。我也确实在一些声明中弄混了display。

此外，vertical-align: bottom;很重要，否则您的所有链接都会在悬停时向上移动。

CSS在悬停时显示图像

2 个答案: