[英]Add class on hover for children in jQuery?
我有一个页面,它将有一系列“tile”div,每个div都有一个或多个子div。
我想,当滚动父div时,将它的类和所有div更改为悬停状态。
我可以很容易地让父div工作,但不能得到孩子: 见小提琴
$('.tile').hover(
function () {
$(this).addClass("hover");
$(this).find('.inner').addClass("hover");
},
function () {
$(this).removeClass("hover");
$(this).find('.inner').removeClass("hover");
}
)
我使用“find”看到的所有示例都使用了NAMED父级; 但我只需要使用当前父母正在徘徊的孩子($ this)。
编辑/ UPDATE:
我的部分问题是在div内部有一个图像按钮。 该按钮应该具有OWN翻转功能。 请参阅以下设计师的图片。 我可以得到第一个组合 - 一切青色和白色加按钮......但是使用CSS我不能影响lus按钮的PARENTS,可以吗?
而不是编写脚本,尝试使用CSS伪类:将鼠标悬停在所有悬停元素上:
.tile {
width: 200px;
height: 300px;
background-color: yellow;
margin: 20px;
}
.tile:hover {
background-color: lightblue;
}
.inner {
width: 200px;
height: 50px;
background-color: goldenrod;
}
.tile:hover .inner{
background-color:#369;
}
.tile:hover button{
color:#ff0000;
}
.tile:hover button:hover{
color:#00ff00;
}
没有脚本,不用担心:)
小提琴: http : //jsfiddle.net/67tCr/
你的代码很好......你只需要重新订购你的css规则:
.tile {
width: 200px;
height: 300px;
background-color: yellow;
margin: 20px;
}
.inner {
width: 200px;
height: 50px;
background-color: goldenrod;
}
.hover {
background-color: lightblue;
}
或者你可以更具体
.hover, .inner.hover {
background-color: lightblue;
}
我会使用'儿童'功能:
$(".title").hover(function(){
$(this).addClass("hover");
$(this).children(".inner").addClass("hover");
},function(){
$(this).removeClass("hover");
$(this).children(".inner").removeClass("hover");
});
这是小提琴: http : //jsfiddle.net/ckaufman/qXU7R/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.