Yalnızca CSS kullanarak, fareyle üzerine gelindiğinde div'ı <a>

Birisi bir <a>öğenin üzerine geldiğinde bir div göstermek istiyorum , ancak bunu JavaScript değil CSS'de yapmak istiyorum. Bunun nasıl başarılabileceğini biliyor musunuz?

Sen gibi bir şey yapabilirsiniz bu :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Bu, bitişik kardeş seçiciyi kullanır ve enayi balığı açılır menüsünün temelidir .

HTML5 bağlantı elemanlarının hemen hemen her şeyi sarmasına izin verir, bu durumda diveleman bağlantı elemanının alt öğesi haline getirilebilir. Aksi takdirde ilke aynıdır - başka bir öğenin özelliğini :hoverdeğiştirmek için sözde sınıfı kullanın display.

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Bu cevap popüler olduğu için küçük bir açıklamaya ihtiyaç olduğunu düşünüyorum. Dahili öğenin üzerine geldiğinizde bu yöntemi kullanarak kaybolmaz. .Showme, .showme içinde olduğu için, farenizi iki metin satırı (veya her neyse) arasında hareket ettirdiğinizde kaybolmaz.

Bunlar, bu tür davranışları uygularken dikkat etmeniz gereken quirq'lere örnektir.

Her şey bunun için neye ihtiyacınız olduğuna bağlı. Bu yöntem bir menü stili senaryosu için daha iyidir, Yi Jiang'ın araç ipuçları ise daha iyidir.

Opaklığı kullanmak daha iyi buldum, güzel bir bitmiş hover efekti yapmak için css3 geçişleri eklemenizi sağlar . Geçişler sadece eski IE tarayıcıları tarafından bırakılacak, bu yüzden de nazikçe bozunacak.

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Biliyorum bir uzmanım, ama bu kod hakkında bir şeyler çalıştığım için kendimle gurur duyuyorum. Yaparsan:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

('>' İşaretini not edin) Tetikleyiciniz (kendi bölmesinde veya doğrudan bir etikette veya istediğiniz herhangi bir şeyde olabilir) sürece bir etikete her şeyi dahil edebilirsiniz. açığa çıkan div, farenizi birinden diğerine hareket ettirebilirsiniz.

Belki bu çok fazla işe yaramaz, ancak ortaya çıkan div'imi taşmaya ayarlamak zorunda kaldım: otomatik, bu yüzden bazen div'den uzaklaşır hareket ettirilemeyen kaydırma çubukları vardı.

Aslında, sonunda ortaya çıkan divın nasıl yapılacağını öğrendikten sonra (şimdi bir kardeş değil, tetikleyicinin bir çocuğu olmasına rağmen), z-endeksi açısından tetiğin arkasında oturun (bu sayfadan biraz yardım alarak) : Bir üst öğenin çocuğun üzerinde görünmesini nasıl sağlar ), ortaya çıkarmak için açığa çıkan div'i döndürmek zorunda kalmazsınız, sadece tetiğin üzerinde durmaya devam edin ve tekerleğinizi kullanın.

Ortaya çıkardığım div sayfanın çoğunu kapsıyor, bu nedenle bu teknik, farenin her hareketiyle ekranın bir durumdan diğerine yanıp sönmesi yerine onu çok daha kalıcı hale getiriyor. Aslında gerçekten sezgisel, bu yüzden kendimle gerçekten gurur duyuyorum.

Tek dezavantajı, her şeyin içine bağlantılar koyamazsınız, ancak her şeyi büyük bir bağlantı olarak kullanabilirsiniz.

Bu yanıt, gizlenebilir öğenin gösterildiğinde ne tür bir ekran (satır içi vb.) Olması gerektiğini bilmenizi gerektirmez:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

Bu, bitişik kardeş seçici ve seçici değil kullanır .

Yi Jiang'ın sunduğu doğru çözümü genişleten bu genel amaçlı şablon çözümünü sunmak istiyorum.

Ek avantajlar şunları içerir:

• herhangi bir eleman türünün veya birden fazla elemanın üzerine gelme desteği;
• açılır pencere, nesneler dahil olmak üzere herhangi bir öğe türü veya öğe kümesi olabilir;
• kendi kendini belgeleyen kod;
• pop-up öğesinin diğer öğelerin üzerinde görünmesini sağlar;
• bir veritabanından html kodu oluşturuyorsanız izlenecek ses temeli.

Html'de aşağıdaki yapıyı yerleştirirsiniz:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

Css'de aşağıdaki yapıyı yerleştirirsiniz:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

Dikkat edilmesi gereken birkaç nokta:

1. Div.popup öğesinin konumu sabit olarak ayarlandığından (mutlak olarak da işe yarayacaktır) içerik, görünür özelliğin iyi çalışmasına izin veren belgenin normal akışı içinde değildir.
2. z-endeksi, div.popup öğesinin diğer sayfa öğelerinin üstünde görünmesini sağlayacak şekilde ayarlanmıştır.
3. İnformation_popup_container küçük bir boyuta ayarlanır ve bu nedenle üzerine gelinemez.
4. Bu kod yalnızca div.information öğesinin üzerine gelmeyi destekler. İmlecin hem div.information hem de div.popup üzerinde gezinmesini desteklemek için aşağıdaki Açılır Fareyle Üzerine Gelme konusuna bakın.
5. Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 ve Google Chrome 28.0.15'te beklendiği gibi test edildi ve çalışıyor.

Fareyle Pop-up'ın üzerine gelin

Ek bilgi olarak. Açılır pencere, kesip yapıştırmak isteyebileceğiniz bilgiler içerdiğinde veya etkileşimde bulunmak isteyebileceğiniz bir nesne içerdiğinde, önce değiştirin:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

ile

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

İkincisi, div.popup'un konumunu, div.information ile çakışma olacak şekilde ayarlayın. Div.information öğesinin dışına hareket ettirilirken div.popup öğesinin fareyle üzerine gelebilmesini sağlamak için birkaç piksel yeterlidir.

Bu, Internet Explorer 10.0.9200 ile beklendiği gibi çalışmaz ve Opera 12.16, Firefox 18.0 ve Google Chrome 28.0.15 ile beklendiği gibi çalışır.

Açılır çok düzeyli menüyle eksiksiz bir örnek için http://jsfiddle.net/F68Le/ kemanına bakınız .

lütfen bu kodu test et

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

+Sadece ilk değil iç içe elemanı 'seçeneğini' izin >seçeneğini iç içe elemanları sadece - daha iyi kullanmak için ~ebeveynin çocuğu keyfi elemanı seçmek için izin elemanı süpürdü. Opaklık / genişlik ve geçiş kullanarak pürüzsüz görünüm sağlayabilirsiniz

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Benim için, tetikleyici öğeden (bu durumda) her ayrıldığımda kaybolmasını görmeden gizli div ile etkileşim kurmak istiyorsam eklemeliyim:

div:hover {
    display: block;
}

Ana cevaba dayanarak, bu, ?bir bağlantının yakınında tıklandığında bir bilgi araç ipucunu görüntülemek için yararlı bir örnektir :

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

Bu CSS'yi kullanarak yaptığım testten:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

Ve bu HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

, ikincisini kullanarak genişledi, ancak birincisini kullanarak genişlemedi. Fareyle üzerine gelme hedefi ile gizli div arasında bir div varsa, o zaman işe yaramaz.

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: div'in üzerine gelin, başka bir div'de metni göster

Unutma. bir görüntünün üzerine gelmeye çalışıyorsanız, görüntüyü bir kabın etrafına koymanız gerekir. css:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

Bunun üzerine gelirseniz:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

Bu şunu gösterecektir:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>