0

我正在我的网站上创建一个菜单，上面写着：
HTML 代码

<ul id="menu">
<li><a href="index.aspx">Home</a></li>
<li><a href="about.aspx">About</a></li>
<li><a href="sample.aspx">Sample</a></li>
</ul>

CSS 代码

ul#menu li a:link,ul#menu li a:visited {color:#333333;text-decoration:none;}
ul#menu li a:hover,ul#manu li a:active {color:#a61607;text-decoration:none;}

在每个列表项的悬停时，我想在悬停时显示一个图像（图像是这样的，它出现在每个列表项的文本边界处）。这意味着出现的图像不必出现在文本上，也不必替换。它只是在文本的一侧移动，并在悬停结束时消失。
对于每个列表项，都有一个单独的图像关联用于翻转，并且必须在鼠标从列表项文本移开时消失。我不确定如何获得上述效果，并且我遵循的所有链接都是在翻转时更改图像的指南。有什么建议么？

4

4 回答 4

1

您在每个链接之后的列表项中添加一个图像。您display: none;在图像上进行设置，然后您可以在悬停时使用ul#menu li:hover img {display: inline-block}

演示：http ://dabblet.com/gist/3151894

HTML 变得简单：

<ul id="menu">
    <li><a href="index.aspx">Home</a><img src="imghome.png"></li>
    <li><a href="about.aspx">About</a><img src="imgabout.png"></li>
    <li><a href="sample.aspx">Sample</a><img src="imgsample.png"></li>
</ul>

在 CSS 中，我只添加了：

#menu li img {
    width: 15px;
    display: none;
}
#menu li:hover img { display: inline-block; }

编辑：或者，可以使用显示图像

#menu a:hover + img { display: inline-block; }
于 2012-07-20T16:55:41.333 回答
0

你可以这样做：

<ul id="menu">
<li><a id="firstLi" href="index.aspx">Home</a></li>
<li><a id="secondLi" href="about.aspx">About</a></li>
<li><a id="thirdLi" href="sample.aspx">Sample</a></li>
</ul>


a#firstLi:hover {background: url('images/image1.png')}
a#secondLi:hover {background: url('images/image2.png')}
a#thirdLi:hover {background: url('images/image3.png')}
于 2012-07-20T17:00:58.347 回答
0

这是CSS：

ul#menu li a:link,ul#menu li a:visited {color:#333333;text-decoration:none;}
ul#menu li a:hover,ul#manu li a:active {color:#a61607;text-decoration:none;}
ul#menu li img {display: none;}
ul#menu li:hover img {display: inline-block;}​

我对所有三个链接都使用了相同的图像，搜索了一张要使用的测试图像。显然，您将使用您想要的任何图像。

<ul id="menu">
<li>
    <a href="index.aspx">
        Home
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>
<li>
    <a href="about.aspx">
        About
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>
<li>
    <a href="sample.aspx">
        Sample
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>

​​​​​​​​​​​​​​​</p>

编辑以回应 op 的评论

如果您希望在滚动锚点而不是 li 时显示图标/图像。您可以将第 4 行 css 更改为以下内容：

ul#menu a:hover img {display: inline-block;}​

但是，我不知道您必须使用哪些额外的 CSS 来调整元素的大小或位置。当我在 jsfiddle 中只运行这个 CSS 和 HTML 时，我遇到了一个“颤抖”的问题。当悬停在锚点上时，图像会显示，但它会重新定位所有其他元素，并且会发生一种悬停/非悬停。如果我添加以下 CSS 规则，使我的锚点在列表/列表项块元素中，我没有问题。

ul#menu li a {display: block;}

此外，您还可以设置锚点或 li 元素的高度/宽度或填充以适应图像的尺寸。

于 2012-07-20T17:04:57.843 回答
0

这是工作小提琴：http: //jsfiddle.net/Q6CaM/

HTML

<ul id="menu">
    <li><a href="index.aspx">Home</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
<li><a href="about.aspx">About</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
<li><a href="sample.aspx">Sample</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
</ul>​

CSS

li{display:block; overflow:hidden;}
a{display:inline-block; float:left; margin:0 5px 0 0;}
img {display:none; position:absolute; }
li:hover img{display:inline-block;}
于 2012-07-20T17:07:24.293 回答