2016-05-02 13 views
1

CSS colorと 'text-decoration'プロパティが私がここにある 'menulight'関数を使って適用されていない理由を理解できません。jQueryがCSSプロパティを更新しない

メニュー項目の上にマウスを置くと 'font-weight'と 'font-family'がうまく動作しています。

これを簡潔にするために、他の機能が適用されているコードの残りを省略しています。

編集:#menulight aは、クラスセレクタ.menuhoverよりもCSSでの優先順位が高いためであるコード

<!DOCTYPE html> 
<html> 
<head> 
<title>Meetings &#038; Events | The Landon Hotel</title> 
<link rel="stylesheet" href="style/style.css"> 
<script src="../../jquery-1.11.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("div.event").hover(highlight); 
     $("#menu-main-menu a").hover(menulight); 
    }); 
    function highlight(evt) { 
     $(this).toggleClass("divhover"); 
    } 
    function menulight(evt) { 
     $(this).toggleClass("menuhover"); 
    } 
</script> 
    <style type='text/css'> 

     .divhover { 
      background-color:cornsilk; 
     } 
     .divhover .eventDate { 
      text-decoration: underline; 
      font-weight: bold; 
      font-family: times new roman; 
      color:magenta; 
     } 
     .menuhover { 
      font-weight: bold; 
      color:magenta; 
      font-family: cursive; 
      text-decoration: underline; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="header"><img src="img/header.png"></div> 
     <div id="hero"> 
      <div class="current"><img src="img/HomePageImages/Paris.jpg"></div> 
     </div> 
    <nav class="main-navigation" role="navigation"> 
     <div> 
      <ul id="menu-main-menu" class="nav-menu"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="restaurant-to-room-service.html">Room Service</a></li> 
       <li><a href="specials.html">Specials</a></li> 
       <li><a href="reservations.html">Reservations</a></li> 
       <li><a href="meetings-events.html">Meetings &#038; Events</a></li> 
       <li><a href="news.html">News</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div class="content"> 

     <h1>Meetings &#038; Events</h1> 
     <p>All of the following meetings take place in the Bernal Height Landon Hotel in San Francisco, in their new, state-of the-art conference room.</p> 
     <hr/> 

     <div class="event"> 
     <h3>23rd Annual Inventors International Exhibition and Conference:</h3> 
     <img width="220px" src="img/inventors_international.jpg"> 
     <ul><li id="eventDate" class="eventDate">Friday, October 31st through Sunday, November 2nd 2014</li></ul> 
     <p>The best scientific minds, showing their riveting and forward-thinking inventions, will be in-house for a science and technology-packed weekend. The halls, conference room, and lobby of the Bernal Heights Landon Hotel will be brimming with exhibits, presentations, and demonstrations - providing something for everyone in the family.</p>   
     </div> 

     <div class="event"> 
     <h3>KinetEco, Inc. Solar Seminar:</h3> 
     <img class="meeting-right" src="img/solar_conference.jpg"> 
     <ul><li class="eventDate">Friday, November 7th through Sunday, November 9th 2014</li></ul> 
     <p>San Francisco's own KinetEco, Inc. has been a trailblazer in solar energy for the past two decades, and has solarized thousands of businesses and residences throughout the world. Join their talented team of engineers and scientists for this not-to-be-missed event that will explore solar as the must-have energy source of the present and future.</p> 
     </div> 

     <div class="event"> 
     <h3>Classic Car Social:</h3> 
     <img class="meeting-left" src="img/classic_car.jpg"> 
     <ul><li class="eventDate">Tuesday, November 11th through Wednesday, November 12th 2014</li></ul> 
     <p>Join other classic car enthusiasts for the monthly classic car social. Bring your car to showcase and share your hobby with others, and enjoy a hearty breakfast buffet. Reservations are required, as parking space is limited for the event.</p> 
     </div> 

     <div class="event"> 
     <h3>Hansel &#038; Petal California Native Gardening Seminar:</h3> 
     <img class="meeting-right" src="img/california_natives.jpg"> 
     <ul><li class="eventDate">Friday, November 21st through Sunday, November 23rd 2014</li></ul> 
     <p>With California's current drought situation, never has it been timelier to attend one of Hansel &#038; Petal's informative seminars on native gardening. You'll learn how to select and layout plants for an attractive and drought-resistant landscape. In addition, a tour of some of the best local native gardens will be offered on Saturday morning.</p> 
     </div> 
    </div> 
    </div> 
</body> 
</html> 
+0

jQueryライブラリが含まれていますか?#menu-main-menu a.menuhover Aziz

+0

'$(this)'は要素を参照し、 'window'オブジェクトを参照していませんか? – Xufox

+0

はい私はjqueryライブラリを含んでいます。ここではわかりやすくするためにページコード全体を追加します。 –

答えて

2

の残りの部分を追加しました。 font-weightとfont-familyがオーバーライドできるという事実は、これらのプロパティがより高い優先度を持つセレクタで宣言されていないため、これを示しています。

#menu-main-menu a { 
     color: green; 
    } 
    #menu-main-menu a.menuhover { 
     font-weight: bold; 
     color:magenta; 
     font-family: cursive; 
     text-decoration: underline; 
    } 
+0

クラスはトグルされているので、それは問題ではないと思いましたか?また、テキスト装飾はなぜ機能しないのですか? –

+0

私はあなたが言っていることを私は思います。ありがとうございました! –

+1

問題はあります:トグルされたクラスはどのクラスとも同じように扱われており、標準のCSS優先順位計算が行われます。スタイルをインラインで書く '.css()'を使ってオーバーライドしない限り。インラインスタイルは、スタイルシートで宣言されたプロパティーよりも優先度が高く、 '!important'サフィックスを持つプロパティーを除きます。アンカー要素のtext-decorationプロパティを指定して読み込まれた別のスタイルシートがありますか? – Terry

関連する問題