小画像にホバーテキストを追加

Question

最後の列にその行を削除できるテーブルがあります。それは（Xの）画像を含み、その列はこのように見えます。

<td id="delete:$row[recordID]"> 
    <a href="#" class="delete cent" > 
    <img alt="x" border="0" src="images/delete.png" /> 
    </a> 
</td> 

私はホバーと私はマウスが画像の上に置いたときに、いくつかのテキストを追加したい時に拡大するには画像のためにしたいと思います。テキストは "Click to Delete"と言うべきですが、これを行うには以下のようなjQueryを使ってみましたが、何も起こりません。テキストは表示されず、マウスが「x」画像上にマウスを置く時間に関係なく、画像は拡大しません。彼のアイデアにテキストを追加する方法がわかりません。これをどのように機能させるには？

$(document).ready(function() { 
$('a.delete').on('mouseenter',function() { 
    $(this).css({ 
     'height':'175px' 
    }); 
}); 

Answer 1

あなたのケースでthisがaタグではなく画像であるので、これは動作しません。あなたはこのタグの高さを変更しています。イメージではありません。あなたが戻って画像を配置するmouseleaveイベントを実装することも必要があり、これはまだ十分ではありません

$(document).ready(function() { 
 
    $('a.delete').on('mouseenter', function() { 
 
    $(this).find('img').css({ 
 
     'height': '175px' 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td id="delete:$row[recordID]"> 
 
    <a href="#" class="delete cent"> 
 
    <img alt="x" border="0" src="https://lorempixel.com/50/50/" /> 
 
    </a> 
 
</td>

：代わりに、あなたはこのようなタグ内の画像を選択するためにfind()機能を使用することができますその通常のサイズに戻します。ところで

---

$(document).ready(function() { 
 
    $('a.delete').on('mouseenter', function() { 
 
    $(this).find('img').css({ 
 
     'height': '175px' 
 
    }); 
 
    }); 
 
    $('a.delete').on('mouseleave', function() { 
 
    $(this).find('img').css({ 
 
     'height': 'auto' 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td id="delete:$row[recordID]"> 
 
    <a href="#" class="delete cent"> 
 
    <img alt="x" border="0" src="https://lorempixel.com/50/50/" /> 
 
    </a> 
 
</td>

は、私はあなたが実装しやすいCSS溶液で行くことをお勧めします。必要なテキストを追加するには、CSSと疑似要素にホバー効果を使用します。これは、特に使用する方法を私に示した偉大な答え@Termani Afifある

a.delete { 
 
    text-decoration: none; 
 
    position:relative; 
 
    display:inline-block; 
 
    overflow:visible; 
 
} 
 

 
a.delete img { 
 
    height: 50px; 
 
    transition: 1s 
 
} 
 

 

 
a.delete:hover img { 
 
    height: 100px; 
 
} 
 

 
a.delete:hover::after { 
 
    content:"Click Here to delete"; 
 
    position:absolute; 
 
    z-index:999; 
 
    left:100%; 
 
    top:40%; 
 
    font-size:14px; 
 
    width:120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td id="delete:$row[recordID]"> 
 
    <a href="#" class="delete cent"> 
 
    <img alt="x" border="0" src="https://lorempixel.com/50/50/" /> 
 
    </a> 
 
</td>