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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
J

Jon1Snow

Hectopat
Katılım
30 Aralık 2020
Mesajlar
1.261
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
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;
}
 
Son düzenleyen: Moderatör:
Çözüm
oynozan
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>
Genişletmek için tıkla...
Ç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.
Tarihe göre sırala Puana göre sırala
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;
}
Genişletmek için tıkla...

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.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
ChatGPT'ye zaten sordum işe yaramamış olacak ki buraya sormuşum. Çözümü bilmiyorsanız böyle şeyler yazmanız gereksiz.
 
Artı 0 Eksi
Jon1Snow dedi:
#btn2:hover + #colors {
display:block;
}
Genişletmek için tıkla...
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.
 
Artı 0 Eksi
OnlyX dedi:
Önceden sorduğunuzu bilemezdim maalesef özür dilerim.
Genişletmek için tıkla...
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.
Genişletmek için tıkla...

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>
 
Artı 0 Eksi

Benzer konular

Maraza25
CSS hover kullanımı
Mesaj
2
Görüntüleme
1.106
isaeken
isaeken
igrahiga
  • Soru
CSS sunucuda çalışmıyor
Mesaj
1
Görüntüleme
735
RaSGooL
RaSGooL
Salih335
Harici dosyada CSS çalışmıyor
Mesaj
8
Görüntüleme
516
Salih335
Salih335
Eşref Bey
CSS Margin Kodu Çalışmıyor
Mesaj
4
Görüntüleme
468
bonz
bonz
manyetiklahmacun
  • Çözüldü
Çözüldü  CSS, margin-top: çalışmıyor
2 3
Mesaj
26
Görüntüleme
1.449
manyetiklahmacun
manyetiklahmacun

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı