使文字显示在悬停

所以我需要的文字出现在悬停在图像（它不必须是一个链接，如果是太难了）使文字显示在悬停

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; 

}

来源

2015-05-29 lisap

http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/ – lisap

你怎么想显示的文字？弹出窗口？可点击文字？什么文字应该出现？你在说什么形象？使用诸如“当您悬停＃box1 div ...”时。但首先，为我们创建一个jsFiddle。 – MortenMoulder

#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>

来源

2015-05-29 07:48:35 Dmitriy

Thnaks这么多！ – lisap

这是你想要实现的吗？

#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>

来源

2015-05-29 07:46:04 jollelj

非常感谢！ – lisap

添加此

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

link here

，或者如果你想这对于<p>

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

来源

2015-05-29 07:51:19 Rasel

很简单的CSS

#box1 > #text1 { 
    display: none; 
} 

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

来源

2015-05-29 07:53:06

你可以试试这个..

<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效果适用于子女

希望这可以帮助

来源

2015-05-29 07:57:50

使文字显示在悬停

回答

相关问题