Question

我试图让鼠标悬停在表格单元格中时显示文字。我希望文本保持隐藏，直到我将鼠标悬停在它上面。我做到了，但不知道如何使文本显示为纯色（当我将鼠标悬停在单元格上时，会降低其不透明度）。有没有办法使用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");
})

Answer 1

要使文字显示为实心，请更改

.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/

Answer 2

这可以在没有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。祝你好运

悬停时透明背景上的文本

2 个答案: