JQuery наведение и выбор класса - PullRequest
Новая
       21

JQuery наведение и выбор класса

24 голосов
/ 09 ноября 2008

Я не хочу динамически менять цвет фона div, используя следующие HTML, CSS и javascript. HTML: 

<div id="menu">
    <div class="menuItem"><a href=#>Bla</a></div>
    <div class="menuItem"><a href=#>Bla</a></div>
    <div class="menuItem"><a href=#>Bla</a></div>
</div>

CSS: 

.menuItem{
  display:inline;
  height:30px;
  width:100px;
  background-color:#000;

Javascript: 

$('.menuItem').hover( function(){
     $(this).css('background-color', '#F00');
},
function(){
     $(this).css('background-color', '#000');
});

РЕДАКТИРОВАТЬ: Я забыл сказать, что у меня были причины не хотеть использовать способ CSS.

И я действительно забыл проверить, загружен ли DOM.

Ответы [ 10 ]

51 голосов
/ 09 ноября 2008

Твой код мне подходит.

Убедитесь, что DOM готов, прежде чем ваш javascript будет выполнен с помощью функции jQuery $ (callback): 

$(function() {
   $('.menuItem').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });
});
29 голосов
/ 09 ноября 2008

Я бы предложил не использовать JavaScript для такого простого взаимодействия. CSS способен сделать это (даже в Internet Explorer 6), и он будет гораздо более отзывчивым, чем при использовании JavaScript.

Вы можете использовать псевдокласс ": hover" CSS, но для того, чтобы он работал с Internet Explorer 6, необходимо использовать его для элемента "a". 

.menuItem
{
    display: inline;
    background-color: #000;

    /* width and height should not work on inline elements */
    /* if this works, your browser is doing the rendering  */
    /* in quirks mode which will not be compatible with    */
    /* other browsers - but this will not work on touch mobile devices like android */

}
.menuItem a:hover 
{
    background-color:#F00;
}
9 голосов
/ 09 ноября 2008

Этого можно достичь в CSS с помощью псевдокласса: hover. (: hover не работает на <div> s в IE6)

HTML: 

<div id="menu">
   <a class="menuItem" href=#>Bla</a>
   <a class="menuItem" href=#>Bla</a>
   <a class="menuItem" href=#>Bla</a>
</div>

CSS: 

.menuItem{
  height:30px;
  width:100px;
  background-color:#000;
}
.menuItem:hover {
  background-color:#F00;
}
5 голосов
/ 09 ноября 2008

Поскольку это меню, оно также может перейти на следующий уровень, очистить HTML и сделать его более семантическим с помощью элемента списка:

HTML: 

  <ul id="menu">
    <li><a href="#">Bla</a></li>
    <li><a href="#">Bla</a></li>
    <li><a href="#">Bla</a></li>
  </ul>

CSS: 

#menu {
  margin: 0;
}
#menu li {
  float: left;
  list-style: none;
  margin: 0;
}
#menu li a {
  display: block;
  line-height:30px;
  width:100px;
  background-color:#000;
}
#menu li a:hover {
  background-color:#F00;
}
5 голосов
/ 09 ноября 2008

test.html 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>jQuery Test</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <div id="menu">
            <div class="menuItem"><a href=#>Bla</a></div>
            <div class="menuItem"><a href=#>Bla</a></div>
            <div class="menuItem"><a href=#>Bla</a></div>
        </div>
    </body>
</html>

test.css 

.menuItem
{

    display: inline;
    height: 30px;
    width: 100px;
    background-color: #000;

}

test.js 

$( function(){

    $('.menuItem').hover( function(){

        $(this).css('background-color', '#F00');

    },
    function(){

        $(this).css('background-color', '#000');

    });

});

Работы: -)

2 голосов
/ 10 ноября 2008

На стороне заметки это более эффективно: 

$(".menuItem").hover(function(){
    this.style.backgroundColor = "#F00";
}, function() {
    this.style.backgroundColor = "#000";
});
1 голос
/ 16 февраля 2011

Если кто-то прочитает исходный вопрос, чтобы обозначить, что он хочет динамически изменить наведенный CSS, а не просто изменить базовое правило CSS для элемента, я нашел, что это работает:

У меня есть динамически загружаемая страница, которая требует, чтобы я узнал, насколько высоко становится контейнер после загрузки данных. После загрузки я хочу изменить эффект наведения CSS, чтобы элемент покрывал результирующий контейнер. Мне нужно изменить правило css .daymark: hover, чтобы иметь новую высоту. Вот как ... 

function changeAttr(attrName,changeThis,toThis){
    var mysheet=document.styleSheets[1], targetrule;
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;

    for (i=0; i<myrules.length; i++){
        if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule
            targetrule=myrules[i];
            break;
        }
    }
    switch(changeThis)
    {
        case "height":
            targetrule.style.height=toThis+"px";
            break;
        case "width":
            targetrule.style.width=toThis+"px";
            break;
    }

}
1 голос
/ 09 ноября 2008

Я предпочитаю ответ foxy, потому что мы никогда не должны использовать javascript, когда для работы созданы существующие свойства css.

Не забудьте добавить display: block ; в .menuItem, чтобы учитывались высота и ширина.

edit: для лучшего разделения сценариев / внешнего вида, если вам когда-нибудь понадобится изменить стиль с помощью jQuery, я бы определил дополнительный класс css и использовал бы $(...).addClass("myclass") и $(...).removeClass("myclass")

0 голосов
/ 07 января 2010

Всегда держите вещи легкими и простыми, создавая класс

.bcolor {background: # F00; }

ТОГДА ИСПОЛЬЗУЙТЕ addClass () и removeClass (), чтобы завершить его

0 голосов
/ 11 марта 2009

Я только что написал в jQuery пример того, как создавать наложения div для переключателей, чтобы создать компактный, интерактивный, но простой плагин для выбора цвета для jQuery

http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...