Çö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.

OnlyX · 31 Ağustos 2023

Jon1Snow dedi:
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; }

Buraya yazıp beklemek yerine chat GPT'ye hemen kopyalamak yapıştırmak daha kolay bence chat GPT kullanarak yazmaya çalışın ama düzelttiği yerlere dikkat ederek ve öğrenerek.

Jon1Snow · 31 Ağustos 2023

OnlyX dedi:
Buraya yazıp beklemek yerine chat GPT'ye hemen kopyalamak yapıştırmak daha kolay bence chat GPT kullanarak yazmaya çalışın ama düzelttiği yerlere dikkat ederek ve öğrenerek.

ChatGPT'ye zaten sordum işe yaramamış olacak ki buraya sormuşum. Çözümü bilmiyorsanız böyle şeyler yazmanız gereksiz.

300319 · 31 Ağustos 2023

CSS:

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

Bu şekilde dener misiniz?

OnlyX · 31 Ağustos 2023

Jon1Snow dedi:
ChatGPT'ye zaten sordum işe yaramamış olacak ki buraya sormuşum. Çözümü bilmiyorsanız böyle şeyler yazmanız gereksiz.

Önceden sorduğunuzu bilemezdim maalesef özür dilerim.

Jon1Snow · 31 Ağustos 2023

300319 dedi:
CSS:

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

Bu şekilde dener misiniz?

Maalesef olmuyor.

300319 · 31 Ağustos 2023

Tam olarak ne yapmak istiyorsunuz?

Jon1Snow · 31 Ağustos 2023

300319 dedi:
Tam olarak ne yapmak istiyorsunuz?

Butonun üstüne gelindiğinde açılacak bir menü yapmak istiyorum.

oynozan · 31 Ağustos 2023

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

O kullandığın + operatörü elementler sadece alt altaysa çalışır. HTML yapını görmeden yorum yapmamız çok zor. İki elementin arasında elementler varsa ~ kullan. Eğer #colors, #btn2'nin kardeşi veya çocuğu değilse CSS ile butonun hover event'ini kullanarak #colors'u değiştiremezsin.

Jon1Snow · 31 Ağustos 2023

OnlyX dedi:
Önceden sorduğunuzu bilemezdim maalesef özür dilerim.

Sorun değil.

oynozan dedi:
O kullandığın + operatörü elementler sadece alt altaysa çalışır. HTML yapını görmeden yorum yapmamız çok zor. İki elementin arasında elementler varsa ~ kullan. Eğer #colors, #btn2'nin kardeşi veya çocuğu değilse CSS ile butonun hover event'ini kullanarak #colors'u değiştiremezsin.

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>

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

Ayrıntılı düzenleme

Jon1Snow

Hectopat

oynozan

OnlyX

Hectopat

Jon1Snow

Hectopat

300319

Zettapat

OnlyX

Hectopat

Jon1Snow

Hectopat

300319

Zettapat

Jon1Snow

Hectopat

oynozan

Megapat

Jon1Snow

Hectopat

Benzer konular