Saya mencoba untuk membuat perubahan warna latar belakang div saat mouse di atas .
div {background: white;}
div a: hover {background: abu-abu; lebar: 100%;
tampilan: blok; dekorasi-teks: tidak ada;}
hanya satu link di dalam div mendapat warna latar belakang .
apa yang dapat saya lakukan untuk membuat seluruh div mendapatkan warna latar belakang itu?
Terima kasih
EDIT:
bagaimana saya bisa membuat div secara keseluruhan untuk bertindak sebagai link - ketika Anda mengklik di mana saja pada div itu, untuk membawa Anda ke sebuah alamat.
css
colors
background
hover
Ionuț G. Stan
sumber
sumber
Jawaban:
Secara
a:hover
harfiah " " memberi tahu browser untuk mengubah properti untuk<a>
-tag, saat mouse diarahkan ke atasnya. Yang mungkin Anda maksudkan adalah "the div:hover
", yang akan terpicu saat div dipilih.Hanya untuk memastikan, jika Anda ingin mengubah hanya satu div tertentu, berikan id ("
<div id='something'>
") dan gunakan CSS "#something:hover {...}
" sebagai gantinya. Jika Anda ingin mengedit grup div, buat menjadi kelas ("<div class='else'>
") dan gunakan CSS ".else {...}
" dalam kasus ini (perhatikan periode sebelum nama kelas!)sumber
Menggunakan 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>
sumber
Tidak perlu memasang jangkar. Untuk mengubah gaya div saat hover kemudian Ubah warna latar div saat hover.
<div class="div_hover"> Change div background color on hover</div>
Di halaman .css
.div_hover { background-color: #FFFFFF; } .div_hover:hover { background-color: #000000; }
sumber
Untuk membuat seluruh div bertindak sebagai tautan, setel tag jangkar sebagai:
display: block
Dan atur tinggi tag anchor Anda menjadi 100%. Kemudian atur ketinggian tetap ke tag div Anda. Kemudian berikan gaya pada tag jangkar Anda seperti biasa.
Sebagai contoh:
<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>
Semoga berhasil!
sumber
kode html:
<!DOCTYPE html> <html> <head><title>this is your web page</title></head> <body> <div class = "nicecolor"></div> </body> </html>
kode css:
.nicecolor { color:red; width:200px; height:200px; } .nicecolor:hover { color:blue; }
dan begitulah cara Anda mengubah div dari merah menjadi biru dengan mengarahkan kursor di atasnya.
sumber
Set
display: block;
pada suatu dan memberikan beberapa tinggi
sumber
cukup coba properti "hover" dari CSS. misalnya:
<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>
Saya harap ini akan membantu
sumber
Anda bisa meletakkan jangkar di sekitar div.
<a class="big-link"><div>this is a div</div></a>
lalu
a.big-link { background-color: 888; } a.big-link:hover { background-color: f88; }
sumber
Anda bisa saja berisi div dalam tag anchor seperti ini:
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>
sumber
Buat saja properti
!important
di file css Anda sehingga warna latar belakang tidak berubah saat mouse di atas. Ini berhasil untuk saya.Contoh:
.fbColor { background-color: #3b5998 !important; color: white; }
sumber