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设置到位置：相对然后做一个绝对定位的div，底部和右侧为负值示例：

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

图像翻转 - 缩放靠近鼠标

4 个答案: