jQuery unosić i selektor klasy

Nie chcę zmieniać koloru tła div dynamicznie za pomocą następującego HTML, CSS i javascript. HTML:jQuery unosić i selektor klasy

<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'); 
});

EDIT: zapomniałem powiedzieć, że miałem powodów nie chcą używać drogę css.

Naprawdę zapomniałem sprawdzić, czy DOM został załadowany.

Źródło

2008-11-09 Pim Jager

Twój kod wygląda dobrze dla mnie.

Upewnij się, że DOM jest gotowy przed JavaScript jest wykonywany za pomocą funkcji jQuery $ (callback):

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

Źródło

2008-11-09 13:27:24 foxy

Jak wspomniano w tej odpowiedzi, myślę, że wyczucie czasu było wszystkim, czego brakowało. –

Tak, po prostu zapomniałem uruchomić kod po zakończeniu ładowania DOM. –

+1 bardzo proste rozwiązanie – jpswain

Można to osiągnąć w CSS za pomocą: hover pseudo-klasę. (: Hover nie działa na <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; 
}

Źródło

2008-11-09 13:35:17 foxy

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'); 

    }); 

});

Works :-)

Źródło

2008-11-09 13:52:30 okoman

Proponuję, aby nie używać JavaScript dla tego rodzaju prostej interakcji. CSS potrafi to zrobić (nawet w Internet Explorerze 6) i będzie o wiele bardziej responsywny niż w JavaScript.

Możesz użyć pseudoklaski CSS ": hover", ale aby działało z Internet Explorerem 6, musisz użyć go na elemencie "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; 
}

Źródło

2008-11-09 13:57:46

Preferuję odpowiedź foxy, ponieważ nigdy nie powinniśmy używać javascript, gdy istniejące właściwości css są wykonane dla zadania.

Nie zapomnij dodać display: block ; w .menuItem, więc wysokość i szerokość są brane pod uwagę.

edit: dla lepszego scenariusza/wyglądać & czuć oddzielenie, jeśli kiedykolwiek potrzeba, aby zmienić styl poprzez jQuery chciałbym zdefiniować dodatkową klasę css i używać $(...).addClass("myclass") i $(...).removeClass("myclass")

Źródło

2008-11-09 14:10:16 vincent

Zgadzam się z zastrzeżeniami. Winiarze są w domu! –

Jeśli zmieniasz tylko kolor tła, nie ma potrzeby zmiany klasy - zmiana klas powoduje, że przeglądarka musi ponownie obliczyć położenie elementów. – Sugendran

Interesująca uwaga dotycząca kalkulacji repozycjonowania, pomyślę o tym następnym razem. – vincent

Ponieważ jest to menu, mógłby równie dobrze zgłosić się do następnego poziomu, i oczyścić HTML i uczynić go bardziej semantyczne za pomocą elementu listy:

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; 
}

Źródło

2008-11-09 15:37:43

Po prostu ciekawy ... Kiedy robię systemy menu. Zawsze natrafiam na rzeczy z UL/LI. Ale używając tej metody musiałem "cofnąć formatowanie" domyślnych ustawień dla UL/LI, a następnie sformatować je za pomocą własnych niestandardowych css. Zwłaszcza z menu sub i sub/sub. Kiedy użyłem znaczników div, jak zrobił to pytający, wystarczy napisać css, którego potrzebowałem, aby je sformatować, nic więcej. Od tego czasu zawsze zastanawiałem się, w jaki sposób UL/LI odnosi się do menu jako ściśle mówiąc, menu nie ma list (bardziej jak Navs). Ale nie mówię, że jesteś w błędzie, tylko pytasz dlaczego, oprócz faktu, że jest to "norma", metoda UL/LI jest lepsza niż div? –

Na marginesie to jest bardziej efektywne:

$(".menuItem").hover(function(){ 
    this.style.backgroundColor = "#F00"; 
}, function() { 
    this.style.backgroundColor = "#000"; 
});

Źródło

2008-11-09 21:47:39 Sugendran

prostu zakodowane w górę przykład w jQuery, w jaki sposób tworzyć div nakładek na przyciski opcji, aby stworzyć zwarty, interaktywne ale prostą wtyczkę wyboru koloru -w dla jQuery

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

Źródło

2009-03-11 04:21:33

Zawsze zachować rzeczy proste, tworząc klasę

.bcolor {background: # F00; }

następnie użyć addClass() & removeClass(), aby zakończyć ją

Źródło

2010-01-06 21:07:16 Joberror

Jeśli ktoś czyta oryginalne pytanie oznacza, że chcą dynamicznie zmieniać CSS aktywowanych i nie tylko zmienić regułę baza css dla element, Znalazłem to do pracy:

Mam dynamicznie ładowaną stronę, która wymaga ode mnie, aby dowiedzieć się, jak wysoko kontener staje się po załadowaniu danych. Po załadowaniu chcę zmienić efekt wskaźnika css tak, aby element przykrywał wynikowy pojemnik. Muszę zmienić css .daymark: hover rule, aby mieć nową wysokość. W ten sposób ...

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; 
    } 

}

Źródło

2011-02-16 15:53:54 Greg

Odpowiedz

Powiązane problemy