2016-05-02 3 views
1

У меня возникли проблемы с выяснением, почему CSS color и свойства «text-decoration» не применяются через функцию «menulight», которую я здесь.jQuery не обновляет свойства CSS

«font-weight» и «font-family» работают нормально, когда я наводил курсор на элементы меню.

Я вырезал остальную часть кода, что другие функции применяются только для того, чтобы сохранить это кратким.

Edit: Добавлена ​​остальная часть кода

<!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? – Aziz

+0

Вы уверены, что '$ (this)' относится к элементу, а не к объекту 'window'? – Xufox

+0

Да, у меня есть библиотека jquery, здесь я просто добавлю весь код страницы только для ясности. –

ответ

2

Это происходит потому, что #menulight a имеет более высокий приоритет в CSS, чем селектор класса .menuhover. Об этом свидетельствует тот факт, что шрифт-вес и семейство шрифтов могут быть переопределены, поскольку эти свойства не были объявлены в селекторе с более высоким предпочтением. Вместо этого вы должны использовать #menu-main-menu a.menuhover:

#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()', который пишет стиль inline. Inline-стили имеют более высокий приоритет, чем любые свойства, объявленные в таблицах стилей, кроме тех, которые содержат суффиксы '! Important'. Существуют ли альтернативные таблицы стилей, задающие свойство text-decoration привязки элемента привязки? – Terry

Смежные вопросы