CODEWITHSUNDEEP
jquery
adi daniel
adi daniel

Reputation: 31

Change background image to multiple divs from a specific parent div

I need help with a DIV background issue. I want to create a price table script with, lets say, 6 columns:

<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>

I want to change the background image to all divs with a hovered parent. If I hover div "col6", I want all divs from it to change background image. Note that I use the same classes for all columns and I need to change only the one from main div that is hovered.

I have found this code snippet but I don't know how to adapt it to work in my situation (as my javascript knowledge is very low):

 $(function() {
    $('.parent').hover( function(){
       $(this).children("div").css('background-color', 'gray');
    },
     function(){
       $(this).children("div").css('background-color', 'red');
    });
 });

Thank you and hope all makes sense

Upvotes: 3

Views: 1288

Answers (3)

Michele Bertoli
Michele Bertoli

Reputation: 1030

You can do this with CSS, like this:

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

Please, see the fiddle: http://jsfiddle.net/nTAzk/

Then you can add a class to all the parents (like .parent-class) and do it once for each column.

Upvotes: 1

Ram
Ram

Reputation: 144689

As your container elements don't have class attributes, you can use attribute starts with selector:

$(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")');
    });
});

Upvotes: 2

Gabriel Santos
Gabriel Santos

Reputation: 4974

First of all, you need to close properly your "div" element:

<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>"

Second, you can add a class (so, if you change col[N] to foo[N] you don't need to edit any script.

<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>

Third, use the follow code:

$(document).ready(function() {
    $('.sample-class').hover(function(){
        $(this).children('div').css('backgroundColor', 'gray');
    }, function(){
        $(this).children('div').css('backgroundColor', 'red');
    });
});

See http://jsfiddle.net/4g2Kj/

Upvotes: 0

Related Questions