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

当你徘徊要么事件1或事件2，我想使用id =日起这个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>​​​​​​​