使悬停区域更大答案

【问题标题】：Make Hover area bigger使悬停区域更大
【发布时间】：2015-05-24 17:47:04
【问题描述】：

我制作了一张图片，当它悬停时，会进行放大并显示“工具提示”，文字为“往里看”。

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

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

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

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

【问题讨论】：

你应该，当用户悬停工具提示时，你的 mouseout 函数被调用，当前答案试图预测你可能遇到的最可能的错误
但是解决办法是什么？这样不行吗？
你真的需要javascript吗？一个简单的带有 css 的 scale transition 应该对你有用。
你能给我举个例子吗？

标签： javascript css hover block area

【解决方案1】：

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

【讨论】：

试过但没有成功。

【解决方案2】：

这里的问题是当您将鼠标悬停在工具提示上时会触发 mouseout 事件。所以把悬停效果放在包含图片的div上就可以解决问题了。

【讨论】：

喜欢这个？ $("a img").hover(function() 到这个 $(".img").hover(function() 但是没有用。Zoom 疯了。

【解决方案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({

in 和 out 函数

http://jsfiddle.net/f817od2v/

【讨论】：

奇怪，一小时前你的代码还在工作，但现在不行了。清除缓存，还是一样。每个人都这样吗？

【解决方案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");
    });

【讨论】：