我有这个我用 CSS 完成的导航栏,我希望当我将鼠标悬停在 3 个导航图标之一上时,它会更改主图像背景位置。
我尝试了几种方法,但未能使它们正常工作。
CSS
/* Nav Button 1 */
.nav1 {
float:left;
padding-top:20px;
border:none;
outline:none;
}
#nav1
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav1:hover
{
background-position: 0 -107px;
}
/* Nav Button 2 */
.nav2 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav2
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav2:hover
{
background-position: 0 -107px;
}
/* Nav Button 3 */
.nav3 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav3
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav3:hover
{
background-position: 0 -107px;
}
/* Nav Name */
.navname {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#navname
{
display: block;
width: 228px;
height: 81px;
background: url("images/blank.png") no-repeat 0 0;
}
HTML
<div id="navigation">
<div class="nav1">
<a id="nav1" href="#"></a>
</div>
<div class="nav2">
<a id="nav2" href="#"></a>
</div>
<div class="nav3">
<a id="nav3" href="#"></a>
</div>
<div class="navname"><a id="navname" href="#"></a>
</div>
</div>
知道如何做到这一点吗? 'navname' 元素是我想在悬停在 nav1、nav2、nav3 上时更改的背景位置。
谢谢:D
最佳答案
这使用 jQuery 非常简单:
$('element-to-initiate-change').hover(function(){
//this will happen when your mouse moves over the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
},function(){
//this is what will happen when you take your mouse off the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
});
这是一个例子:http://jsfiddle.net/dLbDF/258/
如果您使用自己的代码制作了一个 jsfiddle,我会对您的代码进行此操作,以便您看得更清楚。提问时始终使用 jsfiddle 或其他类型的示例。
关于javascript - CSS Hover 改变其他元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7628729/