将背景图像更改为特定父div的多个div

时间:2012-10-07 20:53:36

标签: jquery

我需要有关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');
    });
 });

谢谢你,希望一切都有意义

3 个答案:

答案 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');
    });
});

请参阅http://jsfiddle.net/4g2Kj/