鼠标附近的图像翻转缩放

Question

我有一个降临节/圣诞日历。每天都是另一张照片，又打开了一扇门。为了使这些区域可点击，我使用了这样的 CSS 和 ID：

CSS：

ul#doorregions {
  list-style: none;
  background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
  position: relative;
  width: 950px;
  height: 575px;
  margin: 0;
  padding: 0;
}
ul#doorregionsli {
  border: 0px ;
  position: absolute;
}
#door1 {
  left: 135px;
  top: 192px;
  width: 73px;
  height: 116px;
}
#door2 {
  left: 135px;
  top: 192px;
  width: 73px;
  height: 116px;
}

HTML：

<ul id="doorregions">  
  <li id="door1">
    <span><a href="<?php echo($december1); ?>">
    <img src="blankpixel.gif" width="100%" height="100%">
  </a></span></li>
  <li id="door2">
    <span><a href="<?php echo($december2); ?>">
    <img src="blankpixel.gif" width="100%" height="100%">
  </a></span></li>
</ul>

到目前为止一切正常。现在，图像应该在鼠标悬停时在该区域上方显示鼠标光标附近的一扇门。我试过类似的东西：

#door1 a:hover {
  display:block;
  background-image: url(OTHERPICTURE1.jpg);
}

但如果另一张图片大于门区域，则此方法不起作用。还有什么想法吗？我无法对背景图像进行切片，这不是一个选项。

在该区域内不必跟随鼠标，位置可以固定。但是这第二张图片应该只在鼠标悬停在门上（或者可能在第二张图片上）时出现。

最好的解决方案是这样的：http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

但在这种情况下，放大的是同一张图片。我只有空白 gif。最聪明的想法是什么？

Answer 1

如果你愿意使用 jQuery，你可以为每个“门”创建一个隐藏的 div。然后，将悬停事件绑定到a 标签并将 div 的可见性设置为 true。像这样：

$("li #door1 a").hover(function () {
  $("div #door1image", this).fadeIn("fast");
}, function () {
  $("div #door1image", this).fadeOut("fast");
});

“door1image”是从一开始就隐藏的 div 的 ID (display:none)。它可以放在li 内，每个门都带有a 标签。

代码未经测试，可能并不完美，但希望您能理解。

Answer 2

如何将门 div 设置为 position: relative 然后做一个绝对定位的 div 负底部和 rightplacement 示例：

#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25; 
Right:-25;
Display:none;
}

然后使用javascript将显示属性改回正常。

希望这会有所帮助。

Answer 3

我无法让淡入淡出或动画像我想要的那样工作，但这是我制作弹出图像的方法。 注意：不要使用空白图片，图片应该是您希望在悬停时显示的图片。

CSS

ul#doorregions {
  list-style: none;
  background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
  position: relative;
  width: 950px;
  height: 575px;
  margin: 0;
  padding: 0;
}
ul#doorregions li {
  border: 0px ;
  position: absolute;
}
#door1 {
  left: 135px;
  top: 192px;
}
#door2 {
  left: 225px;
  top: 192px;
}
.doors {
  background: #444;
  width: 73px;
  height: 116px;
}
.popup {
 position: absolute;
 top: 0;
 left: -99999px;
 border: 0px;
 z-index: 9;
}

HTML

<ul id="doorregions">
 <li id="door1" class="doors">
  <span><a href="<?php echo($december1); ?>">
   <img class="popup" src="<?php echo($december1Image); ?>">
  </a></span>
 </li>
 <li id="door2" class="doors">
  <span><a href="<?php echo($december2); ?>">
   <img class="popup" src="<?php echo($december2Image); ?>">
  </a></span>
 </li>
</ul>

脚本

// using window.load to ensure all images are loaded
$(window).load(function(){
 $('.doors').each(function(){
  var popup = $(this).find('.popup');
  // find middle of door
  var doorY = $(this).height()/2;
  var doorX = $(this).width()/2;
  // position middle of popup to middle of door
  var popY = doorY - popup.height()/2;
  var popX = doorX - popup.width()/2;
  popup
   .hide()
   .css({top: popY, left: popX });
  $(this).hover(function(){
   popup.show();
  },function(){
   popup.hide();
  })
 })
})

Answer 4

我不完全确定您需要什么，但以下代码复制了您提供的“Fancy Thumbnail”链接的功能。希望它会有所帮助！

<!DOCTYPE html>
<style>
ul {
    list-style: none;
    margin: 50px;
    padding: 0;
}

li {
    width: 300px;
    height: 300px;
    float: left;
    border: 3px outset gray;
    background: white;
}

li:hover {
    margin: -50px;
    width: 400px;
    height: 400px;
    z-index: 2;
    position: relative;
}
</style>
<ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
</ul>