Próbuję zmienić kolor tła div po najechaniu myszą .
element div {background: white;}
div a: hover {background: grey; szerokość: 100%;
Blok wyświetlacza; text-decoration: none;}
tylko ogniwo wewnątrz div pobiera kolor tła .
co mogę zrobić, aby cały element div miał ten kolor tła?
Dziękuję Ci
EDYTUJ:
jak mogę sprawić, by cały div działał jak łącze - po kliknięciu w dowolnym miejscu tego elementu div, aby przejść pod adres.
css
colors
background
hover
Ionuț G. Stan
źródło
źródło
Odpowiedzi:
"
a:hover
" Dosłownie mówi przeglądarce, aby zmieniła właściwości<a>
tagu -tag po najechaniu na niego kursorem myszy. Być może miałeś na myślithe div:hover
zamiast tego „ ”, co uruchomi się po wybraniu elementu div.Aby upewnić się, że jeśli chcesz zmienić tylko jeden konkretny element div, nadaj mu identyfikator („
<div id='something'>
”) i użyj#something:hover {...}
zamiast tego CSS „ ”. Jeśli chcesz edytować grupę elementów div, utwórz z nich klasę („<div class='else'>
”) i użyj.else {...}
w tym przypadku CSS „ ” (zwróć uwagę na kropkę przed nazwą klasy!)źródło
Korzystanie z JavaScript
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';"> Jack and Jill went up the hill To fetch a pail of water. Jack fell down and broke his crown, And Jill came tumbling after. </div>
źródło
Nie ma potrzeby kotwiczenia. Aby zmienić styl elementu div po najechaniu kursorem, a następnie Zmień kolor tła elementu div po najechaniu.
<div class="div_hover"> Change div background color on hover</div>
Na stronie .css
.div_hover { background-color: #FFFFFF; } .div_hover:hover { background-color: #000000; }
źródło
Aby cały element div działał jak łącze, ustaw znacznik kotwicy jako:
display: block
I ustaw wysokość tagu kotwicy na 100%. Następnie ustaw stałą wysokość znacznika DIV. Następnie stylizuj swój tag kotwicy jak zwykle.
Na przykład:
<html> <head> <title>DIV Link</title> <style type="text/css"> .link-container { border: 1px solid; width: 50%; height: 20px; } .link-container a { display: block; background: #c8c8c8; height: 100%; text-align: center; } .link-container a:hover { background: #f8f8f8; } </style> </head> <body> <div class="link-container"> <a href="http://www.stackoverflow.com">Stack Overflow</a> </div> <div class="link-container"> <a href="http://www.stackoverflow.com">Stack Overflow</a> </div> </body> </html>
Powodzenia!
źródło
Kod HTML:
<!DOCTYPE html> <html> <head><title>this is your web page</title></head> <body> <div class = "nicecolor"></div> </body> </html>
kod css:
.nicecolor { color:red; width:200px; height:200px; } .nicecolor:hover { color:blue; }
i w ten sposób zmienisz swój div z czerwonego na niebieski, najeżdżając na niego.
źródło
Zestaw
display: block;
na a i podaj pewną wysokość
źródło
po prostu wypróbuj właściwość CSS „hover”. na przykład:
<html> <head> <style> div { height:100px; width:100px; border:2px solid red; } div:hover { background-color:yellow; } </style> </head> <body> <a href="#"> <div id="ab"> <p> hello there </p> </div> </a> </body>
Mam nadzieję, że to pomoże
źródło
Możesz po prostu umieścić kotwicę wokół elementu div.
<a class="big-link"><div>this is a div</div></a>
i wtedy
a.big-link { background-color: 888; } a.big-link:hover { background-color: f88; }
źródło
możesz po prostu umieścić element div w tagu kotwicy w następujący sposób:
a{ text-decoration:none; color:#ffffff; } a div{ width:100px; height:100px; background:#ff4500; } a div:hover{ background:#0078d7; }
<body> <a href="http://example.com"> <div> Hover me </div> </a> </body>
źródło
Po prostu
!important
ustaw właściwość w pliku css, aby kolor tła nie zmieniał się po najechaniu kursorem myszy. To zadziałało dla mnie.Przykład:
.fbColor { background-color: #3b5998 !important; color: white; }
źródło