CODEWITHSUNDEEP
jquery
Mike
Mike

Reputation: 980

changing div within another div

My html looks like:

<div class="cal_wrapper_top" id="event-1">
    <div class="cal_date">
        Feb 18
    </div>

    <div class="cal_events">
        Jack Johnson
    </div>
</div>
<div class="cal_wrapper" id="event-2">
    <div class="cal_date">
        Feb 19
    </div>

    <div class="cal_events">
        Jason Mraz
    </div>
</div>

When you hover either event-1 or event-2, I want the div within this with id=date to be bolded.

Is it possible to select this specific div?

Upvotes: 0

Views: 97

Answers (2)

skimberk1
skimberk1

Reputation: 2094

You can do this with plain CSS: http://jsfiddle.net/skimberk1/r645t/

Or you can do it with jQuery (although I don't know why you'd want to): http://jsfiddle.net/skimberk1/5wsPq/

Also, you can also use an ID once and only once.

EDIT: Here's an example that changes the text on hover: http://jsfiddle.net/skimberk1/qwSun/

Upvotes: 3

pete
pete

Reputation: 25081

Certainly:

 $('div.cal_wrapper, div.cal_wrapper_top').hover(function() {
    $(this).find('div#date').css('font-weight', 'bold');
    //$(this).find('div.date').css('font-weight', 'bold'); //if changing to class
    //$(this).find('div[name="date"]').css('font-weight', 'bold'); //if changing to name
}, function() {
    $(this).find('div#date').css('font-weight', 'normal');
    //$(this).find('div.date').css('font-weight', 'normal'); //if changing to class
    //$(this).find('div[name="date"]').css('font-weight', 'normal'); //if changing to name
});​

I would be remiss to point out that the attribute id should be unique to a single element on the page. Quirkiness is bound to occur otherwise.

You may want to redo the html and either change the id to a class:

<div class="cal_wrapper_top" id="event-1">
    <div class="cal_date date">
        Feb 18
    </div>

    <div class="cal_events">
        Jack Johnson
    </div>
</div>
<div class="cal_wrapper" id="event-2">
    <div class="cal_date date">
        Feb 19
    </div>

    <div class="cal_events">
        Jason Mraz
    </div>
</div>​​​

or use the name attribute instead:

<div class="cal_wrapper_top" id="event-1">
    <div class="cal_date" name="date">
        Feb 18
    </div>

    <div class="cal_events">
        Jack Johnson
    </div>
</div>
<div class="cal_wrapper" id="event-2">
    <div class="cal_date" name="date">
        Feb 19
    </div>

    <div class="cal_events">
        Jason Mraz
    </div>
</div>​​​​​​​

Upvotes: 0

Related Questions