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>

当您将事件-1或事件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>

在另一个div中改变div

2 个答案: