其他图像下的图像是否有焦点（用于悬停）？

我有一个页面全缩略图，让我们称他们为A，B，C等，他们铺设出像：其他图像下的图像是否有焦点（用于悬停）？

A，B，C，d，E，

F，G， H，I，J，

K，L，M，N ..等

当悬停在一个，它得到的z-index：1，扩大至2.5倍大小 - 因此，如果我们将鼠标悬停在A上，它放大&完全遮挡了B和F和G.

因此，接下来请参阅eg B中的一个必须从A的放大版本（在该点处与放大另一图像），然后将鼠标移动回到B.

因此大量筛选“闪蒸”等移开鼠标

是否有一种显示A的方式，但是当鼠标移离其左上部分时，（B）行中的下一个对焦点会放大。

我看了HTML的<area>和<map>标签，但没有成功。

目前我有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>...</title> 

<style type="text/css"> 
.figcaption { 
    color:green; display:block; min-width:120px; 
} 
.F1 { 
    float:left; width:120px; background:yellow; padding:0;margin:0;text-align:center; font-size:12px; 
    font-weight:bold;position:relative;vertical-align:bottom; } 

.I1 { 
    float:left; width:100%;width:120px;height:107px; 
    } 
.I1:hover { width:300px; height:auto;position: absolute; z-index:1; left:0px; top:0;} 
/* cant get next line to work 
.F1:hover > .I1 { width:300px; height:auto;position: absolute; z-index:1; left:0px; top:0;} cant get this to work 
*/ 
.F1:hover + .figcaptionX { position: absolute;background:fuchsia; } 
</style> 
</head> 
<body> 
<div id="wrapper" style="width:600px;"> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf1.jpg?v=1345760446 " title="  Thomas Morris" /><br /><figcaption>DGF 1</figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf2.jpg?v=1345797337 " title=" New Orleans Owls - The Owls' Hoot " /> <figcaption>DGF 2</figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf03.jpg?v=1345797531 " title=" Johnny Dodds " /> <figcaption>DGF 3 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf04.jpg?v=1345797743 " title=" Tony Parenti " /> <figcaption>DGF 4 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf05.jpg?v=1345797920 " title=" Sizzling the Blues : New Orleans 1927-29 " /> <figcaption>DGF 5 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf06.jpg?v=1345798454 " title=" Dixieland Jug Blowers " /> <figcaption>DGF 6 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf07.jpg?v=1345798694 " title=" That's My Stuff : Chicago 1929-30 " /> <figcaption>DGF 7 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf08.jpg?v=1345798987 " title=" Hot Notes New York Volume 1 " /> <figcaption>DGF 8 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf09.jpg?v=1345799007 " title=" Chicago 1929-30 : Get Easy Blues " /> <figcaption>DGF 9 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf10.jpg?v=1345797064 " title=" Clifford Hayes " /> <figcaption>DGF10 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf11.jpg?v=1345797138 " title=" Thumpin' &amp; Bumpin' : New York Volume 2 " /> <figcaption>DGF11 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf12.jpg?v=1345797166 " title=" Don't Leave Me Here : New York Volume 3 " /> <figcaption>DGF12 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf13.jpg?v=1345797205 " title=" Alexander, Where's that Band? " /> <figcaption>DGF13 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf14.jpg?v=1345797221 " title=" Dreaming the Hours Away : Clarence Williams Vol: 1 " /> <figcaption>DGF14 </figcaption></figure> 
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf15.jpg?v=1345797241 " title=" Memphis Jug Band Volume 1 " /> <figcaption>DGF15 </figcaption></figure> 
...</div> <!-- end of wrapper div --> 
</body> 
</html>

，如果需要，我可以使用JavaScript/JQuery的。

来源

2014-09-10 user801347

这看起来很奇怪。为什么只有在用户点击图片时才放大图片？ – kol 2014-09-10 20:26:23

你应该考虑用JS来做这件事，当你有效的时候禁用任何动画并且稍后会有一些延迟。这将给用户足够的时间进行交互。你可以发布你的代码小提琴吗？ – 2014-09-10 20:50:41

这可能会给你一些想法...也许在这里用setInterval或其他方式来检查原理，或者通过其他方式来检查光标下方的内容，因为它在整个展开的图像上移动。 http://stackoverflow.com/a/17978065/1998238 – wwwmarty 2014-09-10 20:56:45

您遇到的问题是，只要子元素（.I1）悬停，即使鼠标位于区域“外部”，.F1元素仍处于悬停状态。

有一种方法可以绕过这个问题，虽然它有点不好意思，因为它需要额外的div元素才能达到效果。额外的div元素添加到HTML这样的：

<figure class="F1"><div class="hoverme"></div><img class="I1" src="..." /></figure>

接下来，使用下面的规则你的CSS：

.hoverme { position: absolute; width: 100%; height: 100%; z-index:2; } 
.F1 > .hoverme:hover ~ .I1 { width:300px; height:auto; position: absolute; z-index:1; left:0px; top:0;}

的诀窍是，我们使用的是叠加元素（Z-索引：2）“感知”悬停，但CSS规则通过CSS同级选择器（〜）应用于.I1。

来源

2014-09-10 21:13:45 JHoffmann

辉煌和感谢@JHoffmann工作的一种享受。出于兴趣，您为什么使用： .F1> .hoverme：hover〜.I1 {...} 而不是： .hoverme：hover〜.I1 {...} – user801347 2014-09-11 14:27:17

没有必要添加.F1>部分，但我只是继续使用它，因为其他规则使用它，我想使相关规则看起来类似:-)。 – JHoffmann 2014-09-12 02:21:52

谢谢大家 - 我得到了它的所有工作 - 然后在ie8和 .F1> .hoverme：hover〜.I1 {...}中进行测试。选择器不工作。但我读到，孩子和一般兄弟选择器应该在ie8中工作。有人可以确认吗？ – user801347 2014-09-17 22:14:13

您可以在原始图像上放置完全透明的元素（具有相同的浮动样式），并制作使用这些透明元素的JavaScript来跟踪鼠标并调整其下方的图像大小。

<style> 
.figcaption { 
    color:green; display:block; min-width:120px; 
} 
.F1 { 
    float:left; width:120px; background:yellow; padding:0;margin:0;text-align:center; font-size:12px; 
    font-weight:bold;position:relative;vertical-align:bottom; } 

.I1 { 
    float:left; width:100%;width:120px;height:107px; position: absolute; left: 0px; top: 0px; 
    } 

.hover_div { 
    position: absolute; 
    z-index: 100; 
    opacity: 0.5; 

    width: 120px; 
    height: 107px; 
    top: 0px; 
    left: 0px; 

} 

figcaption { 
    margin-top: 107px; 
} 

</style> 

<body> 

<div id="wrapper" style="width:600px;"> 

    <figure class="F1"> 
     <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf1.jpg?v=1345760446 " title="  Thomas Morris" /> 
     <figcaption>DGF 1</figcaption> 
     <div class="hover_div" style="background-color: red;"></div> 
    </figure> 


    <figure class="F1"> 
     <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf2.jpg?v=1345797337 " title=" New Orleans Owls - The Owls' Hoot " /> 
     <figcaption>DGF 2</figcaption> 
     <div class="hover_div" style="background-color: green;"></div> 
    </figure> 

    <figure class="F1"> 
     <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf03.jpg?v=1345797531 " title=" Johnny Dodds " /> 
     <figcaption>DGF 3 </figcaption> 
     <div class="hover_div" style="background-color: blue;"></div> 
    </figure> 


</div> <!-- end of wrapper div --> 

<script> 

$(document).ready(function() { 
    $('.hover_div').mouseenter(function(){ 
     var $img = $(this).siblings('.I1'); 
     $img.css('z-index','99'); 
     $img.animate({ 
      width: 240, 
      height: 214 
     }); 
    }) 
    .mouseout(function(){ 
     var $img = $(this).siblings('.I1'); 
     $img.css('z-index','1'); 
     $img.animate({ 
      width: 120, 
      height: 107 
     }); 

    }); 
}); 
</script>

JSFiddle

您可以删除div的背景颜色风格，它只是为清晰的视野。并且不要忘记将div_hover的不透明度设置为0.

来源

2014-09-10 21:31:34 Fenistil

谢谢@Fenistil我明白了，但在你的JSFiddle有一个显示abberation - 你会看到它，如果你把3行3个图像。我认为这是由'figcaption'伴随着放大的图像移动（但我不明白为什么它这样做）它曾经保持不动。 – user801347 2014-09-11 13:40:25

嗨，答案和小提琴更新。 – Fenistil 2014-09-11 13:57:01

其他图像下的图像是否有焦点（用于悬停）？

回答

相关问题