我需要有关DIV背景问题的帮助。 我想创建一个价格表脚本,比如6列:
<div id="col1">
<div class="header"></div>
<div class="first_line"></div>
<div class="second_line"></div>
<div class="footer"></div>
<div>
<div id="col2">
<div class="header"></div>
<div class="first_line"></div>
<div class="second_line"></div>
<div class="footer"></div>
<div>
.
.
.
.
<div id="col6">
<div class="header"></div>
<div class="first_line"></div>
<div class="second_line"></div>
<div class="footer"></div>
<div>
我想将背景图像更改为具有悬停父级的所有div。
如果我悬停div "col6"
,我希望它的所有div都能改变背景图像。
请注意,我对所有列使用相同的类,我只需要更改悬停的主div中的一个。
我找到了这段代码片段,但我不知道如何调整它以适应我的情况(因为我的javascript知识非常低):
$(function() {
$('.parent').hover( function(){
$(this).children("div").css('background-color', 'gray');
},
function(){
$(this).children("div").css('background-color', 'red');
});
});
谢谢你,希望一切都有意义
答案 0 :(得分:2)
由于您的容器元素没有类属性,您可以使用attribute starts with
选择器:
$(function() {
$('div[id^=col]').hover(function() {
$(this).children("div").css('background-image', 'url("heaven.png")');
}, function() {
$(this).children("div").css('background-image', 'url("hell.png")');
});
});
答案 1 :(得分:1)
您可以使用CSS执行此操作,如下所示:
#col6:hover div
{
background-color:#000;
}
拜托,请看小提琴: http://jsfiddle.net/nTAzk/
然后你可以为所有父类添加一个类(如.parent-class),并为每列添加一次。
答案 2 :(得分:0)
首先,您需要正确关闭“div”元素:
<div id="col6">
<div class="header"></div>
<div class="first_line"></div>
<div class="second_line"></div>
<div class="footer"></div>
<div> <-- HERE NEED TO BE "</div>"
其次,您可以添加一个类(因此,如果您将col[N]
更改为foo[N]
,则无需编辑任何脚本。
<div id="col1" class="sample-class">
<div class="header"></div>
<div class="first_line"></div>
<div class="second_line"></div>
<div class="footer"></div>
</div>
<div id="col2" class="sample-class">
<div class="header"></div>
<div class="first_line"></div>
<div class="second_line"></div>
<div class="footer"></div>
</div>
第三,使用以下代码:
$(document).ready(function() {
$('.sample-class').hover(function(){
$(this).children('div').css('backgroundColor', 'gray');
}, function(){
$(this).children('div').css('backgroundColor', 'red');
});
});