Zmiana bgkoloru po najechaniu wskaźnikiem, przy użyciu tylko CSS

Chcę, aby po najechaniu na element (pudełko wykonane z css), obiekt background color zmienia się z jednego koloru na inny, na przykład z białego na czerwony. Problem polega na tym, że powinno to być zrobione przy użyciu tylko css i bez javascript. A jeśli javascript musi być koniecznie używany, to kolor powinien wrócić do poprzedniego po wyjściu myszy.Zmiana bgkoloru po najechaniu wskaźnikiem, przy użyciu tylko CSS

--------------- EDIT ---------------

Właściwie starałem to:

body{backgroung: #000;} 
#div{some properties} 
body #div:hover{background: #fff;}

Źródło

2012-12-26 sdnr1

Tylko pokaż nam, co masz próbowałem dotąd .. nawet, że jest źle. Mam nadzieję, że spróbowałeś czegoś przed pytaniem. –

Można to zrobić za pomocą tylko [** CSS **] (http://stackoverflow.com/q/1014861/1577396), ale nie jest to [** zalecane **] (http://css-tricks.com/parent-selektory-w-css /). –

Czysta CSS eksperyment:

http://jsfiddle.net/Tymek/yrKRX/

HTML

<div id="trigger"></div> 
<div id="bg"></div>

CSS

body { 
    height: 100%; 
} 

#bg { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    widht: 100%; 
    height: 100%; 
    z-index: 1; 
    background: #EEE; 
} 

#trigger { 
    position: absolute; 
    width: 200px; 
    height: 136px; 
    top: 50%; 
    left: 50%; 
    margin: -68px 0 0 -100px; 
    background: #333; 
    z-index: 2; 
} 

/* KEY */ 
#trigger:hover ~ #bg { 
    background: #EE0; 
}

Źródło

2012-12-26 11:31:39 Tymek

Dziękuję za odpowiedź. Ten skrypt css działa !!! Właściwie potrzebowałem jednego bez javascriptu, a ty to zrobiłeś. – sdnr1

Nie ma za co =] – Tymek

@Tymek Dobre rozwiązanie! – VJS

Proszę używać jak to

<html> 
    <body> 

    <style type="text/css"> 

     .top{ 
      background:red; 
     } 

     .top2{ 
      background:white; 
     } 
    </style> 

    <div class="top" onmouseover="this.className='top2'" 
        onmouseout="this.className='top'">Here</div> 
    </body> 
</html>

Źródło

2012-12-26 11:19:17 Sky5005e

Kolor tła ciała powinien się zmienić, a nie element div, na którym należy ustawić kursor, aby go zmienić. – sdnr1

Możesz użyć elementów, które chcesz zamiast div. – Sky5005e

użyj wybieraka :hover. Wydaje się całkiem proste, chyba że robisz coś zupełnie innego.

zobacz poniższy przykład dla odniesienia:

.classname { 
    background-color:white; 
} 

.classname:hover { 
    background-color:red; 
}

Źródło

2012-12-26 11:23:38 VJS

Kolor tła ciała powinien się zmienić, a nie element div, na którym należy ustawić kursor, aby go zmienić. – sdnr1

Po obejrzeniu edytowanego pytania odpowiedź @Tymek jest najlepszym rozwiązaniem. Proszę oznaczyć ją jako poprawną odpowiedź. – VJS

Working fiddle

masz wiele typo jest w kodzie takich jak mispelling background jak backgroung i leczenia div jako ID (#div).

CSS (z wyjaśnieniem do literówek)

body{background: #000;}    /*backgroung (mis-spelled)*/ 
div{width:100px;      /*#div (treated as ID)*/ 
    height:100px; 
    border:1px solid black;}

się unosić nad tag nadrzędny musisz obowiązkowo użycie javascript lub jQuery. może pojawić się wątpliwość, dlaczego nie ma właściwości css, aby wybrać znacznik nadrzędny, jeśli tak, to można przejść przez to interesting link . Aby w większości przypadków uniknąć selektora nadrzędnego, możemy uniknąć użycia pozycjonowania w CSS (sprawdź rozwiązanie Tymka).

jQuery

$(document).ready(function(){ 
    $("div").hover(function(){ 
     $(this).parent(this).css('background-color','red'); 
    }); 

    $("div").mouseleave(function(){ 
     $(this).parent(this).css('background-color','white'); 
    }); 
});

Zakładając jesteś nowy jQuery, dać link w head tag HTML, coś jak poniżej, aby powyższą pracę funkcji.

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script>

Sprawdź to Working fiddle

Źródło

2012-12-26 11:32:17

Nie javascript, tylko css. –

@Zachdev W jaki sposób korzystać z [** CSS **] (http://stackoverflow.com/q/1014861/1577396), ale nie jest to [** zalecane **] (http: // css-tricks .com/parent-selektory-w-css /). BTW, nie tylko przeczytać tytuł, przeczytać post też. –

Zmiana bgkoloru po najechaniu wskaźnikiem, przy użyciu tylko CSS

Odpowiedz

Powiązane problemy