Çözüldü CSS :hover çalışmıyor

Merdione · 31 Ağustos 2023

btn2'nin üzerine gelindiği zaman #colors divinin displayini görünür yapması lazım ama yapmıyor. Sizce sorun neyde olabilir? Id'ler doğru.

CSS:

#colors {
 
    margin:auto;
    margin-top:10px;
    display:none;
    transition:0.3s;
 
}

.colorsBtn {
    height:30px;
    width:30px;
    background-color:transparent;
    border:none;
    font-size:150%;

}
#btn2:hover + #colors {
    display:block;
}

Eray T · 31 Ağustos 2023

Bu şekilde dener misiniz?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        button{
            background-color: #ececec;
            color: #333
        }

        #menu{
            display: none;
            width: auto;
            height: auto;
            border: 2px solid #fff;
        }

        button:hover + #menu {
        display: block;
        color: blue;
}

    </style>


</head>
<body>
    <button>Deneme</button>

    <div id="menu">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Illum fugiat iusto omnis eos est dolores. Quos saepe commodi sequi aperiam libero sapiente facere vero modi accusamus.
        Dicta modi sit exercitationem dolorum saepe nihil, laboriosam excepturi qui dolorem voluptate, culpa harum! Maxime
        quisquam in amet corporis quam, nulla soluta eligendi asperiores.
    </div>
</body>
</html>

Merdione · 31 Ağustos 2023

Eray T dedi:

Bu şekilde dener misiniz?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>

 <style>
 button{
 background-color: #ececec;
 color: #333
 }

 #menu{
 display: none;
 width: auto;
 height: auto;
 border: 2px solid #fff;
 }

 button:hover + #menu {
 display: block;
 color: blue;
}

 </style>

</head>
<body>
 <button>Deneme</button>

 <div id="menu">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Illum fugiat iusto omnis eos est dolores. Quos saepe commodi sequi aperiam libero sapiente facere vero modi accusamus.
 Dicta modi sit exercitationem dolorum saepe nihil, laboriosam excepturi qui dolorem voluptate, culpa harum! Maxime
 quisquam in amet corporis quam, nulla soluta eligendi asperiores.
 </div>
</body>
</html>

Codepen'de çalışıyor. Ama zaten bu benim yazdığımın aynısı değil mi?

Eray T · 31 Ağustos 2023

@Merdione biraz farklı, eğer sizin makine üzerinde çalışmıyorsa CTRL + Shift + R yapın sayfayı açınca. Önbellek üzerinden okuyor olabilir.

Merdione · 31 Ağustos 2023

Eray T dedi:
@Merdione biraz farklı, eğer sizin makine üzerinde çalışmıyorsa CTRL + Shift + R yapın sayfayı açınca. Önbellek üzerinden okuyor olabilir.

Makinede de çalışıyor.

oynozan · 31 Ağustos 2023

Merdione dedi:

Sorun değil.

HTML:

<div id="tools" class="tools">
    <button onclick="shareDiv()" class="btn fas fa-share-alt fa-light" id="btn1"></button>
    <button onclick="colors()" class="btn far fa-circle" id="btn2"></button>
    <button class="btn fas fa-expand" id="btn3"></button>
    <button class="btn fas fa-moon"id="mode-toggle"></button>

</div>
<div id="colors">
    <button class="fas fa-circle colorsBtn"></button>
    <button class="fas fa-circle colorsBtn"></button>
    <button class="fas fa-circle colorsBtn"></button>
    <button class="fas fa-circle colorsBtn"></button>
</div>

Çalışmaz tabi hocam, 2 element arasında akrabalık ilişkisi yok. Eğer sadece CSS ile menu yapmaya çalışıyorsanız buton ve menüyü aynı div'in içine koyun. Menü elementine de position: absolute; verin.

Eray T · 31 Ağustos 2023

Merdione dedi:
Makinede de çalışıyor.

Benim attığım kod olması gereken, sizin CSS kodunuz biraz hatalı.

Görüldüğü üzere çalışıyor.

Merdione · 31 Ağustos 2023

oynozan dedi:
Çalışmaz tabi hocam, 2 element arasında akrabalık ilişkisi yok. Eğer sadece CSS ile menu yapmaya çalışıyorsanız buton ve menüyü aynı div'in içine koyun. Menü elementine de position: absolute; verin.

Tamamdır oldu. Teşekkürler.

Çözüldü CSS :hover çalışmıyor

Ayrıntılı düzenleme

Merdione

Hectopat

oynozan

Eray T

Terapat

Merdione

Hectopat

Eray T

Terapat

Merdione

Hectopat

oynozan

Kilopat

Eray T

Terapat

Merdione

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz