CSS'de, bir öğeyi döndürdüğümde başka bir öğeyi görünür hale getirmem mümkün mü? Bir simgem var ve birisi fareyle üzerine geldiğinde, simgenin ne yaptığını açıklayan bir metin öğesi görmesini istiyorum.CSS - Bir öğe yuvarlayın ve başka bir öğe görünür hale getirin
cevap
Her zaman kullandığım bir CSS yalnızca araç ipucu :) IE'de bile harika çalışıyor.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Yardım edin.
emin olun!
.me:hover span { display: block; }
değil elemanın çocuk javascript
JavaScript öneriye katılıyorum kullanmanız gerekebilir süpürdü olan bir öğeyi görüntüleme istiyorum. Özellikle jQuery, sayfa davranış mantığı için kolay ve en uygunudur. Bence CSS sadece görünüş/his/stil olmalı ... Javascript tüm olay ve davranış mantığınız olmalıydı.
Sen (Hunter suggests gibi) ebeveyn üzerinde gelerek çocuk elemanlar görünür yapabilirsiniz, veya kardeşler:
span:hover + span {display: block; }
belki bazı hafif çapraz tarayıcı uyumluluğu sorunu vardır, ancak geçerli bir belge türüne sahip IE7 düşünüyorum + kardeş seçmenler ile tamamdır (ancak bu teoriyi denemedim).
İşte ...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
IE üzerinde çalışmaz biraz tokatladı-birlikte örnek Ama gerçekten sadece jQuery kullanmalıdır.
- 1. Bir EditText'i gizleyin ve bir menüyü tıklatarak görünür hale getirin
- 2. Selenium-python görünmez bir öğe görünür hale getiriyor
- 3. angularjs başka bir öğe
- 4. Python selenium ile görünür bir öğe bulunamıyor
- 5. Selenium Webdriver - Öğe görünür değil
- 6. Başka bir öğe hariç öğe html() nasıl alınır?
- 7. CSS sonraki iki öğe
- 8. CSS @supports (:: sözde öğe)
- 9. Yalnızca başka bir öğe varsa, görüntüleme öğesi
- 10. active_admin başka bir öğe ait öğelerin listesini
- 11. Bir öğe ve aynı isimli
- 12. Java webdriver: Öğe görünür istisnai değil
- 13. Herhangi bir alt öğe
- 14. CSS flex: bir satır seçicideki son ve ilk öğe
- 15. Yalnızca bir öğe
- 16. xml schma xsd: hepsi ve bir başka öğe
- 17. Selenyum ile gezindikten sonra görünür bir öğe nasıl tıklanır?
- 18. Visual Basic: Ne görünür hale getirin bile Radyo düğmesi
- 19. CSS: ana öğe öğesinin sınırlarının biraz dışında konumlandırılmış öğe
- 20. WPF Etiketi (veya başka bir öğe) animasyon kullanarak flaş yapma
- 21. Bir sözdizimi konumlandır: bir öğe öğesinin sağ tarafındaki öğe
- 22. Bir önceki öğe için geçerli olan bir öğe hariç tutuldu
- 23. Belirli öğe sonra * tüm * belgedeki sonraki öğe
- 24. Kaydırılan bir öğe içinde sahte bir öğe nasıl sabit tutulur?
- 25. bir Kaldır-Öğe komutunun
- 26. Öğe
- 27. Öğe,
- 28. XML xpath, bir öğe
- 29. Öğe
- 30. Öğe
burada keman var http://jsfiddle.net/c0owz9qb/ – suhailvs