显示div：hover

Question

我不想用js来做我想做的事。所以我想在不使用js的情况下悬停它时显示div。

这是我的css：

.testHover{
  width : 100px;
  height : 100px; 
  position : relative;
}

.background{
   width : 100px;
  height : 100px;
  background : pink;
}

.cachee{
  visibility : hidden;
  background : green;
  position : absolute;
  top :0px;
  z-index : 999;
}

.cachee:hover{
  visibility : visible;
}

我做了一个jsfiddle：https://jsfiddle.net/g8ud4ck0/3/

所以我想通过悬停它来显示文字，但它不起作用，我该怎么办？

Answer 1

您目前的行事方式不起作用，因为您无法hover隐藏div。您需要做的是创建一个可见的父div，捕获hover事件并在发生这种事件时显示孩子div。

HTML

<div class="parent">Hover me <div class="child">I'm hidden</div></div>

CSS

.child{visibility: hidden;}
.parent:hover .child{visibility: visible;}

Answer 2

您不能使用display:none或visibility:hidden悬停元素，因为它应该不存在，而是执行以下操作之一：

1. 将visibility:hidden更改为opacity:0，然后将鼠标悬停在其上时将其触发

   JS Fiddle 1

   .testHover{
     width : 100px;
     height : 100px; 
     position : relative;
   }
   .background{
      width : 100px;
     height : 100px;
     background : pink;
   }
   .cachee{
     opacity:0;
     background : green;
     position : absolute;
     top :0px;
     z-index : 999;
   }
   .cachee:hover{
     opacity:1;
   }

   <div class="testHover">
     <div class="background"></div>
     <div class="cachee"><a>Je suis une div cachée</a></div >
   </div>

2. 将鼠标悬停在前一个div .background上，以使用此规则.cachee

   触发.background:hover ~ .cachee,.cachee:hover的可见性

   JS Fiddle 2

   .testHover{
     width : 100px;
     height : 100px; 
     position : relative;
   }
   .background{
      width : 100px;
     height : 100px;
     background : pink;
   }
   .cachee{
     visibility : hidden;
     background : green;
     position : absolute;
     top :0px;
     z-index : 999;
   }
   .background:hover ~ .cachee,.cachee:hover {
     visibility : visible;
   }

   <div class="testHover">
     <div class="background"></div>
     <div class="cachee"><a>Je suis une div cachée</a></div >  
   </div>

3. 触发父悬停的可见性

   JS Fiddle 3

   .testHover{
     width : 100px;
     height : 100px; 
     position : relative;
   }
   .background{
      width : 100px;
     height : 100px;
     background : pink;
   }
   .cachee{
     visibility : hidden;
     background : green;
     position : absolute;
     top :0px;
     z-index : 999;
   }
   .testHover:hover .cachee {
     visibility : visible;
   }

   <div class="testHover">
     <div class="background"></div>
     <div class="cachee"><a>Je suis une div cachée</a></div >  
   </div>

Answer 3

您无法悬停隐藏的元素。但您可以使用opacity: 0悬停元素。

.cachee {
  opacity: 0;
}
.cachee:hover {
  opacity: 1;
}

.testHover {
  width: 100px;
  height: 100px;
  position: relative;
}
.background {
  width: 100px;
  height: 100px;
  background: pink;
}
.cachee {
  opacity: 0;
  background: green;
  position: absolute;
  top: 0px;
  z-index: 999;
}
.cachee:hover {
  opacity: 1;
}

<div class="testHover">
  <div class="background">
  </div>
  <div class="cachee">
    <a>Je suis une div cachée</a>
  </div>
</div>