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.


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!)


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>

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

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!


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.


5

Set

display: block;

pada suatu dan memberikan beberapa tinggi


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


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

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>


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

Anda harus mencoba melampirkan lebih banyak detail pada jawaban, karena ini pasti tidak sepenuhnya menjawab pertanyaan.
Tatranskymedved
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.