其他下方的图像是否有焦点(用于悬停）
Can images under other have focus (for hovering over)?
我有一个满是缩略图的页面，我们称它们为a、B、C等。它们的布局如下：
A、 B、C、D、E、
F、 G，H，I，J，
K、 L，M，N。。等
当你把鼠标悬停在一个上时，它会得到z索引：+1，并放大到2.5倍大小——因此，如果我们把鼠标悬停到A上，它会放大&完全遮蔽了B、F和G。
因此，为了下一次看到例如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' & 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。
问题是，只要子元素（.I1）处于悬停状态，即使鼠标"在"它们的区域之外，.F1元素仍然处于悬停状态。
有一种方法可以绕过这个问题，尽管它有点麻烦，因为它需要一个额外的div元素来达到效果。在html中添加一个额外的div元素，如下所示：
<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-index:2）来"感知"悬停，但CSS规则通过CSS同级选择器（~）应用于.I1。
您可以在原始图像上放置完全透明的元素（使用相同的浮动样式），并制作一个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。
相关文章：
- 将函数的上下文应用于javascript变量
- keyup事件处理程序更改焦点不适用于快速键入
- 单击时将焦点更改为元素
- JQueryhide(）不适用于Mozzilla，但适用于Chrome
- JavaScript数组排序(函数）用于对表行进行排序，而不是排序
- PHP中的setcookie仅适用于localhost
- 包括用于facebook评论框的JavaScript SDK
- 焦点事件不适用于动态生成的文本框
- eventListner，用于在另一个文本框获得焦点时添加文本框(vanilla-js）
- 尝试以编程方式设置焦点不适用于 Firefox
- 如何在 Firefox 中以编程方式将焦点应用于 iframe 中的父框架(解决方法为 window.focus(））
- DurandalJs:一种通用解决方案，用于将焦点放在组合视图上的第一个输入元素上
- 其他下方的图像是否有焦点(用于悬停）
- 为什么输入's的焦点事件从未在Firefox中抛出?(适用于Chrome）
- 用于焦点更改的EventListener
- 将焦点样式事件应用于UL标记元素
- Javascript:用于选择焦点文本框内所有文本的跨浏览器解决方案
- 用于下拉菜单的正确焦点和焦点输出javascript函数是什么
- 焦点不用于输入
- angularjs——用于附加全局焦点事件的方式
