3

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

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

4

3 回答 3

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")');
    });
});
于 2012-10-07T20:59:21.290 回答
1

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

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

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

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

于 2012-10-07T20:59:57.017 回答
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/

于 2012-10-07T21:05:19.453 回答