懸停時透明背景上的文字

我試圖讓文字在懸停時出現在表格單元格內。我希望文字保持隱藏狀態，直到我將它懸停在上面。我這樣做，但不知道如何使文本顯示爲純色（當我將鼠標懸停在單元格上時，它會降低其不透明度）。有什麼方法可以使用jQuery在所有內容上添加文本？我希望爲六個單元中的每一個都這樣做。我嘗試使用z-index來做到這一點，但它沒有奏效。懸停時透明背景上的文字

HTML

<div> 
    <a NAME="work"> 
    <div class="samples"> 
    <table> 
     <th>Pokemon</th> 
     <tr>   
      <td id = "squirtle"> 
       <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png"> 
      </td> 
      <td><img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png"></td> 
      <td><img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png"></td> 
     </tr> 
     <tr> 
      <td><img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440"></td> 
      <td><img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png"></td> 
      <td><img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849"</td> 
     </tr> 
    </table> 
</div>

CSS

.samples table{ 
    table-layout: fixed; 
    position: relative; 
    width: 100%; 
} 
.samples td img{ 
    height:300px; 
    width: 300px; 
    position: center; 
    z-index:3; 
} 
.samples td{ 
    text-align: center; 
    height: 300px; 
    width: 300px; 
    background-color: rgb(0,300,300); 
    padding: 0px; 
    margin: 0px; 
    border-color: 2px solid black; 
} 

.samples td#squirtle:hover p{ 
    visibility: visible; 
    color: black; 
    opacity: 0.8; 
} 

.samples td:hover{ 
    opacity: .7; 
} 

.samples td#squirtle p{ 
    visibility: hidden; 
}

jQuery的

$(".samples td img").click(function(){ 
    $(this).text("squirtle rules"); 
})

來源

2016-02-09 st4rgut

imgs沒有文字內容......你需要定位包含圖像的父td，而不是圖像本身。 –

爲了使文本顯示固體，改變

.samples td:hover{ 
    opacity: .7; 
}

到

.samples td:hover img{ 
    opacity: .7; 
}

這將適用於不透明變化到img，但不是一切都在td人。

要獲得關於圖像的頂部的文本，首先添加position: relative;到.samples td，然後添加此規則：

.samples p { 
    margin: 0; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    right: 0; 
    transform: translateY(-50%); 
    color: #fff; 
    font-family: sans-serif; 
    font-size: 30px; 
}

position: relative任何元素意味着任何的它與position: absolute孩子將被定位該父內，而不是整個窗口。

下面是一個例子：https://jsfiddle.net/x1jxpe3m/

來源

2016-02-09 15:35:45

這非常有幫助。不過，我仍然對位置感到困惑：絕對。爲什麼.samples p有這個屬性，而不是.samples td img？ – st4rgut

當你給一些絕對的位置時，它會將它從正常的內容流中取出。您希望將文本從正常流程中移出以將其放置在圖像的頂部，而不是相反。也許更多地瞭解定位會有所幫助 - [本指南]（http://www.barelyfitz.com/screencast/html-training/css/positioning/）看起來可能有幫助。 –

這是沒有的jQuery

<div> 
<a NAME="work"> 
<div class="samples"> 
<table> 
    <th>Pokemon</th> 
    <tr>   
     <td id = "squirtle"> 
      <a href="#" class="wrapper"> 
       <span class="text"> 
        This is text 
       </span> 
       <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png"> 
      </a> 
     </td> 
     <td> 
      <a href="#" class="wrapper"> 
       <span class="text"> 
        This is text 
       </span> 
       <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png"> 
      </a> 
     </td> 
    </tr> 
</table>

的CSS

<style type="text/css"> 
.td{ 
    background-color: purple; 
    width:300px; 
    height:300px; 
} 
.wrapper { 
    position: relative; 
    padding: 0; 
    width:300px; 
    height:300px; 
    display:block; 
} 
.wrapper img { 
    height: 300px; 
    width: 300px; 
} 
.text { 
    position: absolute; 
    top: 0; 
    color:#f00; 
    background-color:rgba(255,255,255,0.8); 
    width: 100%; 
    height: 100%; 
    line-height:100px; 
    text-align: center; 
    padding-top: 40px; 
    z-index: 10; 
    opacity: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.text:hover { 
    opacity:1; 
} 

img { 
    z-index:1; 
} 


</style>

成爲可能，但如果你還是堅持要與要做到這一點juery查看此博客http://alijafarian.com/jquery-image-hover-captions/並查看Demo here。祝你好運

來源

2016-02-09 18:56:29 Transformer

懸停時透明背景上的文字

回答

相關問題