Javascript 使悬停区域更大

如本链接所示

我制作了一个图像，当它悬停时，会放大并显示一个工具提示，里面有文本

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

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

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

   <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");
    });
});

---

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

这里的问题是鼠标悬停在工具提示上时会触发mouseout事件。

---

因此，将悬停效果放在包含图像的div上可以解决问题。

如前一个答案所述，悬停操作应该放在嵌入图像和工具提示的div上：

$(".img").hover(function() {

因为这将改变函数内部的含义，所以您也必须进行更改

$(this).css("box-shadow", "5px 7px 5px #666");
$(this).animate({

进入

关于in和out函数

---

终于做到了！感谢大家：

我接受你的答案，并综合运用

但是我怎样才能把你的答案归类为正确的呢？它只能是一个

这些是变化

HTML

Javascript

        $("#idCover03div").hover(function() {
        // hover in
        $("#idCover03div").css("z-index", 1);
        $("#idCover03img").css("z-index", 1);
        $("#idCover03img").css("box-shadow", "5px 7px 5px #666");
        $("#idCover03img").animate({
           height: "217",
           width: "250",
           left: "-=50",
           top: "-=50"
        }, "slow");
    }, function() {
        // hover out
        $("#idCover03img").css("z-index", 0);
        $("#idCover03img").css("box-shadow", "0px 0px 0px #CCCCCC");
        $("#idCover03img").animate({
            height: "130",
            width: "150",
            left: "+=50",
           top: "+=50"
        }, "fast");
    });

---

您应该知道，当用户悬停工具提示时，会调用mouseout函数，当前答案会尝试预测您可能遇到的最可能的错误，但解决方案是什么？这样不可能吗？你真的需要javascript吗？一个简单的css缩放转换应该可以帮到你。你能给我举个例子吗？试过了，但没有成功。像这样$将img.hoverfunction添加到此$.img.hoverfunction，但不起作用。变焦到了疯狂的程度。奇怪的是，一小时前你的代码还在工作，但现在不工作了。清除了缓存，结果是一样的。每个人都一样吗？

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

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

.clImg:hover .clTooltip{
display:block;}

#idCovers{
text-align: center;
position: absolute;}
.clImg {
margin-left:-99px;
position:inherit;
z-index: 0;}
.end {
margin-right: 0;}
.clear {
clear: both;}
.clImg a img {
position: relative;
border: 0 solid #fff;}

        $("#idCover03div").hover(function() {
        // hover in
        $("#idCover03div").css("z-index", 1);
        $("#idCover03img").css("z-index", 1);
        $("#idCover03img").css("box-shadow", "5px 7px 5px #666");
        $("#idCover03img").animate({
           height: "217",
           width: "250",
           left: "-=50",
           top: "-=50"
        }, "slow");
    }, function() {
        // hover out
        $("#idCover03img").css("z-index", 0);
        $("#idCover03img").css("box-shadow", "0px 0px 0px #CCCCCC");
        $("#idCover03img").animate({
            height: "130",
            width: "150",
            left: "+=50",
           top: "+=50"
        }, "fast");
    });