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

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

oynozan · 31 Ağustos 2023

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

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

Jon1Snow · 31 Ağustos 2023

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

300319 · 31 Ağustos 2023

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

Jon1Snow · 31 Ağustos 2023

300319 dedi:
@Jon1Snow 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

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

300319 · 31 Ağustos 2023

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

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

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

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

Jon1Snow

Hectopat

oynozan

300319

Zettapat

Jon1Snow

Hectopat

300319

Zettapat

Jon1Snow

Hectopat

oynozan

Megapat

300319

Zettapat

Jon1Snow

Hectopat

Benzer konular