使文字顯示在懸停

所以我需要的文字出現在懸停在圖像（它不必須是一個鏈接，如果是太難了）使文字顯示在懸停

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

使文字顯示在懸停

回答

相關問題