Question

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

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

Answer 1

由于您的容器元素没有类属性，您可以使用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")');
    });
});

Answer 2

您可以使用CSS执行此操作，如下所示：

#col6:hover div
{
    background-color:#000;
}

拜托，请看小提琴： http://jsfiddle.net/nTAzk/

然后你可以为所有父类添加一个类（如.parent-class），并为每列添加一次。

Answer 3

首先，您需要正确关闭“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/

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

3 个答案: