Html 图标图像上的悬停效果?
早些时候我发了一条关于将图标内联的帖子。但现在,我在尝试悬停图标图像时遇到了问题。例如,假设我有一个facebook图标,如果鼠标在这个图标上,我希望这个图标稍微亮一点(不是背景,只是图标),以指示光标在图标上。根据我的记忆,这是通过有两个单独的图像(一个带有正常图标,另一个比正常图标更亮)来完成的,你可以在css中的hover中摆弄背景图像,但我似乎无法解决这个问题。在本例中,假设facebook1.png是明亮版,facebook.png是普通版 HTML 似乎还是没法让它工作 任何帮助都将不胜感激 提前感谢。使用Html 图标图像上的悬停效果?,html,css,hover,icons,Html,Css,Hover,Icons,早些时候我发了一条关于将图标内联的帖子。但现在,我在尝试悬停图标图像时遇到了问题。例如,假设我有一个facebook图标,如果鼠标在这个图标上,我希望这个图标稍微亮一点(不是背景,只是图标),以指示光标在图标上。根据我的记忆,这是通过有两个单独的图像(一个带有正常图标,另一个比正常图标更亮)来完成的,你可以在css中的hover中摆弄背景图像,但我似乎无法解决这个问题。在本例中,假设facebook1.png是明亮版,facebook.png是普通版 HTML 似乎还是没法让它工作 任何帮助都将
<a class="icons" href="http://www.facebook.com"></a>
和风格一样
<style>
.icons{
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
}
a.icons:hover {
background: url(../images/facebook1.png);
}
</style>
.图标{
背景:url(../images/facebook.png);
显示:内联块;
宽度:64px;
高度:64px;
}
a、 图标:悬停{
背景:url(../images/facebook1.png);
}
首先指向锚定,如下所示:
<a class="icons" href="http://www.facebook.com">f</a>
.icons {
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
content:"";
}
.icons:hover {
background: url(../images/facebook1.png);
}
这将更改您的背景图像。一种简单的方法是使用Javascript。尝试使用以下代码:
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("fb_high"))
{
element.src="fb_low.gif";
}
else
{
element.src="fb_high.gif";
}
}
</script>
<img id="myimage" onhover="changeImage()"
src="fb_low.gif" width="#" height="#">
函数changeImage()
{
element=document.getElementById('myimage')
if(元素src.match(“fb_高”))
{
element.src=“fb_low.gif”;
}
其他的
{
element.src=“fb_high.gif”;
}
}
只要将它插入到您的代码中,就可以了。您也可以使用Twitter图标来实现这一点,但您需要有两张单独的图片 我正在尝试这一点,我不确定如何使用它-这是否意味着我每次都必须为我的文件编辑fb_high.gif和fb_low.gif?除了myImage到myImage1,myImage2还要添加更多内容(例如,还要添加twitter图标,我必须放置myImage2?)?好吧,我将向您展示我的创意来源的网站。如果你阅读周围的段落,它可能是有意义的。该页面是关于更改HTML元素的,这基本上就是您要查找的内容。祝你好运!不显示任何内容:/I我不必在HTML代码中显示某些内容吗?不显示任何内容:/I我不必在HTML代码中显示某些内容吗?它会显示,但悬停效果不起作用,我是否必须在内容中放置一些内容:“”@user2320517尝试
background:url(../images/facebook1.png)!重要的代码>处于悬停状态。仍不工作。。。我的代码有问题吗?我是怎么安排的?这是什么呢!重要的;做谢谢你试图帮助我(顺便说一句:)
.icons {
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
content:"";
}
.icons:hover {
background: url(../images/facebook1.png);
}
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("fb_high"))
{
element.src="fb_low.gif";
}
else
{
element.src="fb_high.gif";
}
}
</script>
<img id="myimage" onhover="changeImage()"
src="fb_low.gif" width="#" height="#">