warna latar belakang div, untuk mengubah kursor

91

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.

Ionuț G. Stan
sumber
Coba tautan ini codebins.com/codes/home/4ldqpc0
gaurang171

Jawaban:

118

Secara a:hoverharfiah " " 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!)

Henrik Paul
sumber
44

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>
Real Red.
sumber
21

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; }
Virsj Bhorania
sumber
17

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!

Shaun
sumber
11

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.

pengguna3689455
sumber
5

Set

display: block;

pada suatu dan memberikan beberapa tinggi

Jamol
sumber
3

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

Tajveer Singh Nijjar
sumber
1

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;
}
Nicki
sumber
1

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>

tipuan
sumber
-1

Buat saja properti !importantdi 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;
}
T-Jayanth Dore
sumber
Anda harus mencoba melampirkan lebih banyak detail pada jawaban, karena ini pasti tidak sepenuhnya menjawab pertanyaan.
Tatranskymedved