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