Javascript CSS悬停以更改其他元素
我有这个导航栏,我已经在CSS中做了,我希望它这样当我在3个导航图标之一,它将改变主图像背景位置悬停 我试过几种方法,但都没能使它们正常工作 CSSJavascript CSS悬停以更改其他元素,javascript,html,css,hover,nav,Javascript,Html,Css,Hover,Nav,我有这个导航栏,我已经在CSS中做了,我希望它这样当我在3个导航图标之一,它将改变主图像背景位置悬停 我试过几种方法,但都没能使它们正常工作 CSS /* Nav Button 1 */ .nav1 { float:left; padding-top:20px; border:none; outline:none; } #nav1 { display: block; width: 92px; height: 107px; backgro
/* 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",
});
});
以下是一个例子:
如果您使用您的代码制作了一个JSFIDLE,我会对您的代码执行此操作,以便您可以更清楚地看到。问问题时,请始终使用JSFIDLE或其他类型的示例。旧问题,但对于遇到它的其他人,这里有一个可能的CSS专用解决方案 html
除非你想改变元素本身或元素的子元素,否则你必须使用Javascript。嗨,这是我的代码,'主'图像是棕色的矩形。不,他已经给了你答案。您需要将答案应用到您自己的代码中。@Alex我对图像使用CSS背景,而不是标记。好的,我知道您想要什么了。我这样做了:我第一次使用了
.mouseover
而不是.hover
,因为你不需要一个单独的函数来启动mouseout。但对于另外两个,我使用了.hover并使背景位置移回mouseout的顶部。
<div id="navigation">
<a class="nav n1" href="#"></a>
<a class="nav n2" href="#"></a>
<a class="nav n3" href="#"></a>
<a class="title t0" href="#"></a>
<a class="title t1" href="#">one</a>
<a class="title t2" href="#">two</a>
<a class="title t3" href="#">three</a>
</div>
.nav {
display: inline-block;
float: left;
padding-top: 0px;
width: 92px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/triangle.png") no-repeat 0 0;
}
.nav:hover {
background-position: 0 -107px;
}
.title {
width: 228px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/blank.png") no-repeat 0 0;
color: red; font-weight: bold;
text-decoration: none;
font-size: 40px; line-height: 107px;
text-align: center;
}
.t0 {
display: inline-block;
}
.t1, .t2, .t3 {
display: none;
}
.nav:hover ~ .t0 {
display: none;
}
.n1:hover ~ .t1, .n2:hover ~ .t2, .n3:hover ~ .t3 {
display: inline-block;
}