fud*_*din 8 html javascript css jquery
我需要一个由图像组成的菜单,当有人在它周围盘旋时,图像应该会改变.
<div id="menu" >
<a href="#" id="home"><img src="images/about.png" alt="logo" /></a>
</div>
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
我面临的问题是,当我将鼠标悬停在菜单项周围时,悬停时显示的图像将显示在旧图像的背面.此外,显示的悬停背景图像的宽度和高度非常小.请帮忙.谢谢![在此输入图片说明] [1]
Pab*_*con 22
如前所述,不需要JS解决方案.
另一种方法是加载两个图像并用:hover事件隐藏/显示它们.像这样的东西:
HTML:
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
Nic*_*ndo 16
这是一个js/jquery解决方案
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
HTML:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
这是一个有效的例子.快乐编码:)
小智 4
将此代码放在结束正文标记之前，
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
将班级主页放在img标签中。完毕。工作完美。
| 归档时间： |
|
| 查看次数： |
82453 次 |
| 最近记录： |