CSS hover kullanımı

Maraza25 · 21 Nisan 2021

Merhaba, ben internet sitesinde 1. kutunun üstüne gelindiğinde 1.ve 2. kutunun beraber renk değiştirmesini istiyorum. Bunu CSS ile nasıl yapabilirim?

300319 · 21 Nisan 2021

Bu index.html dosyası.

HTML:

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>CSS HOVER</title>
            <link rel="stylesheet" href='index.css'>
    </head>
    <body>
        <div id="main_div">
            <div id="in_div"></div>
        </div>
    </body>
</html>

Bu index.css dosyası.

CSS:

#main_div{
    width: 150px;
    height: 150px;
    background-color: #444;
    transition: background-color 0.3s;
}
#in_div{
    width: 50px;
    height: 50px;
    margin: auto;
    border: 2px solid #fff;
}
#main_div:hover{
    background-color: green;
}
#in_div:hover {
    background-color: yellow;
}
#in_div:hover ~ #main_div {
    background-color: yellow;
}

Burada "main_div" dış kapsayıcı. "in_div" ise içindeki kutu. Burada içindeki kutuya fare ile gelince 2 kutu renk değiştiriyor. Kodları değiştirerek istediğin her şeyi yapabilirsiniz.

CSS hover kullanımı

Maraza25

Hectopat

300319

Zettapat