在另一个div中更改div

Question

我的html看起来像这样：

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

当您悬停event-1或event-2时，我希望id=date中的div是粗体的。

可以选择这个特定的div吗？

Answer 1

您可以使用简单的CSS：http://jsfiddle.net/skimberk1/r645t/完成此操作。

或者您可以使用jQuery (尽管我不知道您为什么要这样做)：http://jsfiddle.net/skimberk1/5wsPq/

此外，您还可以使用一个ID一次，并且只能使用一次。

编辑:这是一个更改悬停文本的示例：http://jsfiddle.net/skimberk1/qwSun/

Answer 2

当然：

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

如果要指出属性id对于页面上的单个元素来说应该是唯一的，那就大错特错了。否则，怪异的事情必然会发生。

您可能希望重做html，并将id更改为一个类：

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

或者改用name属性：

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