div arka plan rengi, onhover'ı değiştirmek için

Question 1

Bir div'in arka plan rengini farenin üzerine getirmeye çalışıyorum .

div {arka plan: beyaz;}
div a: vurgulu {arka plan: gri; genişlik:% 100;
Ekran bloğu; metin dekorasyonu: yok;}

Sadece bağlantı div içine arka plan rengini alır .

tüm div'in arka plan rengini alması için ne yapabilirim ?

teşekkür ederim

DÜZENLEME:
tüm div'in bir bağlantı görevi görmesini nasıl sağlayabilirim - sizi bir adrese götürmek için o div'de herhangi bir yere tıkladığınızda.

Question 2

" a:hover" Harfi, tarayıcıya <a>fare üzerine getirildiğinde -tag için özellikleri değiştirmesini söyler . Belki de kastettiğin şey " the div:hover" idi ve div seçildiğinde tetiklenecekti.

Emin olmak için, yalnızca belirli bir div'i değiştirmek istiyorsanız, ona bir kimlik (" <div id='something'>") verin ve #something:hover {...}onun yerine CSS " " kullanın. Bir div grubunu düzenlemek istiyorsanız, bunları bir sınıf (" <div class='else'>") haline getirin ve .else {...}bu durumda CSS " " kullanın (sınıfın adından önceki noktaya dikkat edin!)

Question 3

Javascript kullanarak

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

Question 4

Çapa koymaya gerek yok. Fareyle üzerine gelindiğinde div stilini değiştirmek için, üzerine gelindiğinde div'in arka plan rengini değiştirin.

<div class="div_hover"> Change div background color on hover</div>

.Css sayfasında

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

Question 5

Tüm div'in bağlantı görevi görmesini sağlamak için bağlantı etiketini şu şekilde ayarlayın:

display: block

Ve bağlantı etiketinin yüksekliğini% 100 olarak ayarlayın. Ardından div etiketiniz için sabit bir yükseklik ayarlayın. Ardından bağlantı etiketinizi her zamanki gibi biçimlendirin.

Örneğin:

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

İyi şanslar!

Question 6

HTML Kodu:

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

css kodu:

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

ve bu şekilde div'inizi üzerine gelerek kırmızıdan maviye çevireceksiniz.

Question 7

Ayarlamak

display: block;

üzerinde bir ve bazı yükseklik vermek

Question 8

CSS'nin "hover" özelliğini deneyin. Örneğin:

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

Umarım bu yardımcı olacak

Question 9

Çapayı div'in etrafına koyabilirsiniz.

<a class="big-link"><div>this is a div</div></a>

ve sonra

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

Question 10

div'i bağlantı etiketinde şu şekilde içerebilir:

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>

Snippet'i genişlet

Question 11

Sadece !importantcss dosyanızdaki özelliği , farenin üzerine gelindiğinde arka plan renginin değişmemesi için yapın.

Misal:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}