Hinzufügen von Hover-Text über ein kleines Bild

Question

Ich habe eine Tabelle, deren letzte Spalte ein Löschen dieser Zeile ermöglicht. Es enthält ein Bild (von einem X), diese Spalte sieht so aus.

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

Ich möchte für das Bild zu vergrößern, wenn schwebte über, und ich möchte einen Text hinzufügen, wenn die Maus über das Bild schwebt. Der Text sollte "Click to Delete" sagen, ich habe versucht, jQuery wie unten zu verwenden, aber nichts passiert. Kein Text wird angezeigt und das Bild wird nicht vergrößert, unabhängig davon, wie lange ich die Maus über das x-Bild bewegen lasse. Ich bin mir nicht sicher, wie ich den Text zu seiner Idee hinzufügen soll. Wie bekomme ich das zum Laufen?

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

Answer 1

arbeitet Dies wird nicht, weil this in Ihrem Fall der a-Tag ist und nicht das Bild. Sie ändern also die Höhe dieses Tags und nicht das Bild. Stattdessen können Sie find() Funktion verwenden, um das Bild im Tag wie folgt zu wählen:

$(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>

Dies ist immer noch nicht genug, wie Sie auch das mouseleave Ereignis zu implementieren haben wieder das Bild zu setzen zu seiner normalen Größe.

$(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>

---

Im Übrigen empfehle ich Ihnen mit einer CSS-Lösung zu gehen, die einfacher zu implementieren ist. Sie können den Hover-Effekt für CSS und das Pseudo-Element verwenden, um den benötigten Text hinzuzufügen.

Sie können so etwas wie dieses (stellen Sie die CSS von Text und Bild, wie Sie benötigen) versuchen:

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>