Question

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?

Answer 1

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/