使文本在悬停时显示

Question

所以我需要文本出现在悬停在图像上(如果这太困难的话，不必是链接)

html

<div id="con">
    <div id="box1">
        <p id="text1">
            <a href="url">DESTINATION</a>SS
        </p>
    </div>

css

#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float:left;
font-size:25px;
width:388px;
height:477px;
background-image: url(media/trying1.png);
margin-left: 120px;
margin-top: 90px;
}

Answer 1

#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float:left;
font-size:25px;
width:388px;
height:477px;
background-image: url(media/trying1.png);
background: #ccc; /*for example*/
margin-left: 120px;
margin-top: 90px;
    
}
#text1{
    opacity: 0;
    transition: all 0.5s;
}
#box1:hover #text1{
    opacity: 1;
}

<div id="con">
<div id="box1">
<p id="text1">
<a href="url">DESTINATION</a>SS
</p>
</div>

Answer 2

这就是你想要达到的效果吗?

#con {
  width: 1024px;
  height: 670px;
  background-color: #161717;
}
#box1 {
  float: left;
  font-size: 25px;
  width: 388px;
  height: 477px;
  /* Changed the background url so that it works */
  background: url(http://placehold.it/200x200) no-repeat center center;
  background-size: cover;
  margin-left: 120px;
  margin-top: 90px;
}
/* The CSS below is added to hopefully achieve the effect you're looking for. */
#text1 {
  display: none;
}
#box1:hover #text1 {
  display: block;
}

<div id="con">
  <div id="box1">
    <p id="text1">
      <a href="url">DESTINATION</a>SS
    </p>
  </div>

Answer 3

add this

#box1 a{display:none;}
#box1:hover a{display:inline;}

链接在这里

或者如果你想要<p>

#box1 #text1{display:none;}
#box1:hover #text1{display:block;}

Answer 4

你可以试试这个…

<style>
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float:left;
font-size:25px;
width:388px;
height:477px;
background-image: url(media/trying1.png);
margin-left: 120px;
margin-top: 90px;
color:#161717;

}
#con:hover #box1 {
color:white;
}
</style>

你能做的就是检测父元素是悬停元素，而CSS效果是针对子元素

希望对大家有所帮助

Answer 5

非常简单的css

#box1 > #text1 {
    display: none;
}
#box1:hover > #text1 {
    display: block;
}