Question

我制作了一张图片，当它悬停时，会进行放大，并提供一个＆＃34;工具提示＆＃34;显示文字＆＃34;查看内部＆＃34;。

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

基本上我认为我需要的是Hover包含了Tooltip。

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

   <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

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

Answer 2

此处的问题是当您将鼠标悬停在工具提示上时会触发mouseout事件。因此，将悬停效果放在包含图像的div上将解决问题。

Answer 3

如前面的回答所述，悬停动作应放在嵌入图像和工具提示的div上：

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

因为这会改变函数内部“this”的含义，你也必须改变

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

进入

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

输入和输出功能

http://jsfiddle.net/f817od2v/

Answer 4

终于做到了！感谢所有人：）

我接受你的答案并混合使用它们。

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

以下是更改

HTML

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

CSS

.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;}

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

使悬停区域更大

4 个答案: