使文本出现在悬停时答案

【问题标题】：Make text appear on hover使文本出现在悬停时
【发布时间】：2015-05-29 16:50:31
【问题描述】：

所以我需要将文本悬停在图像上（如果太难，它不一定是链接）

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;

}

【问题讨论】：

opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/…
您希望文本如何显示？弹出窗口？可点击的文字？应该出现什么文字？你在说什么图像？使用诸如“当您将 #box1 div 悬停时...”之类的术语。但首先，为我们创建一个 jsFiddle。

标签： html css text hover

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

添加这个

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

link here

或者如果你想要这个<p>

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

【讨论】：

【解决方案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效果适用于孩子

希望对你有帮助

【讨论】：

【解决方案5】：

非常简单的css

#box1 > #text1 {
    display: none;
}

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

【讨论】：