javascript - 使悬停区域更大

Question

如链接所示 http://wop.pt/Temp/

我制作了一个图像，当它悬停时，会进行放大并显示“工具提示”，并显示文本“Look inside”。

但我希望当用户将鼠标悬停到工具提示时图像不会缩小。

基本上我认为我需要的是悬停包含工具提示。

如何在不改变图像的情况下扩大触发器的区域？

   <div class="img"><a id="idCoverSchools" href="#"><img width="150" height="130" src="Images/Covers-Schools.png" alt="Interview" /></a>
            <span class="clTooltip">Look inside</span>
   </div>


.clTooltip{
    position:block;
    color:#FFF;
    display: none;
    background: #EB3431;
    margin-top:-45px;
    margin-left:13px;
    z-index: 100;
    width:100px;
    height:16px;
    padding:3px;
    text-align:center;}
.img {
  margin-left:-99px;
  position:inherit;
  z-index: 0;}

$(document).ready(function() {
    var cont_left = $("#idCovers").position().left;
    $("a img").hover(function() {
        // hover in
        $(this).parent().parent().css("z-index", 1);
        $(this).css("box-shadow", "5px 7px 5px #666");
        $(this).animate({
           height: "217",
           width: "250",
           left: "-=50",
           top: "-=50"
        }, "slow");
    }, function() {
        // hover out
        $(this).parent().parent().css("z-index", 0);
        $(this).css("box-shadow", "0px 0px 0px #CCCCCC");
        $(this).animate({
            height: "130",
            width: "150",
            left: "+=50",
           top: "+=50"
        }, "fast");
    });

    $(".img").each(function(index) {
        var left = (index * 200) + cont_left;
        $(this).css("left", left + "px");
    });
});

Answer 1

尝试将悬停 Action 放在嵌入图像和工具提示的 div 上，而不是图像本身。它应该有效。