问题描述
我正在尝试制作一个价格表,以图像显示在服务期间将要处理的区域。到目前为止,我已经设法显示了与悬停的服务相关的图像。只有图像不再显示,直到不再将文本悬停为止。但是它应该在悬停时立即显示。
自从我在网站上工作以来已经有一段时间了,我有点生锈了。
HTML(简短版)
<div class="table-container">
<table class="laseronth-tbl ">
<thead>
<tr>
<th class="lasronth-th">Onderlichaam</th>
<th class="lasronth-th">Prijs</th>
<th class="lasronth-th">Pakketprijs ( 6 + 2 gratis )</th>
</tr>
</thead>
<tbody>
<tr class="tr-hover" data-img="./laserontharing-img/vrouw/onderlichaam/bikini-buiten-slip.png">
<td>Bikini (buiten slip)</td>
<td>€ 60</td>
<td>€ 360</td>
</tr>
<tr class="tr-hover" data-img="./laserontharing-img/vrouw/onderlichaam/bikini-klein.png">
<td>Bikini klein </td>
<td>€ 70</td>
<td>€ 420</td>
</tr>
<tr class="tr-hover" data-img="./laserontharing-img/vrouw/onderlichaam/bikini-groot.png">
<td>Bikini groot (volledig)</td>
<td>€ 90</td>
<td>€ 540</td>
</tr>
<tr>
<td>Bilnaad</td>
<td>€ 120</td>
<td>€ 720</td>
</tr>
<tr>
<td>Onderbenen</td>
<td>€ 125</td>
<td>€ 750</td>
</tr>
<tr>
<td>Knieën</td>
<td>€ 50</td>
<td>€ 300</td>
</tr>
<tr>
<td>Bovenbenen</td>
<td>€ 130</td>
<td>€ 780</td>
</tr>
<tr>
<td>Zone bovenbenen</td>
<td>€ 65</td>
<td>€ 390</td>
</tr>
<tr>
<td>Volledige benen</td>
<td>€ 260</td>
<td>€ 1560</td>
</tr>
<tr>
<td>Voeten</td>
<td>€ 40</td>
<td>€ 240</td>
</tr>
<tr>
<td>Tenen</td>
<td>€ 25</td>
<td>€ 150</td>
</tr>
</tbody>
</table>
<div class="image-container">
<img class="laserontharing-img" id="vrouw-onderlichaam" src="./laserontharing-img/vrouw/onderlichaam/volledig.png" alt="Illustratie vrouw voor visuele laserontharing plaatsaanduiding">
</div>
</div>
脚本
<script type="text/javascript">
$(function() {
$(".tr-hover").hover(function(){
$( "#vrouw-onderlichaam" ).attr("src",$(this).data("img"))
$( "#vrouw-onderlichaam" ).toggle();
});
});
</script>
有人看到它为什么会这样吗? 另外,我有几个这样的表,它们都有自己的图像容器,它们的行为应相同。因此,任何帮助我提高效率的建议都是一个很好的学习机会。 预先感谢!
解决方法
.toggle隐藏元素,您可以在悬停窗口内添加handlerout函数,以使用mouseleave返回主图像。
$(function() {
$(".tr-hover").hover(function(){
$( "#vrouw-onderlichaam" ).attr("src",$(this).data("img"))
},function(){
$( "#vrouw-onderlichaam" ).attr("src","./laserontharing-img/vrouw/onderlichaam/volledig.png")
});
});