Question

我有一个装满缩略图的页面，让我们称之为A，B，C等。它们的布局如下：

A，B，C，d，E，

F，G，H，I，J，

K，L，M，N ......等。

当你将鼠标悬停在一个上面时，它会获得z-index：+1并扩大到2.5倍大小 - 因此，如果我们将鼠标悬停在A上，它会放大＆amp;完全模糊了B，F和G.

因此接下来要看例如B必须将鼠标移离A的放大版本（此时另一个图像放大），然后将鼠标移回B.

因此有很多屏幕可以闪现＆＃39;等

有没有办法显示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。

Answer 1

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

有一种方法可以避开这个问题，虽然它有点hacky，因为它只需要一个额外的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。

Answer 2

您可以在原始图像上放置完全透明的元素（使用相同的浮动样式），并创建一个使用这些透明元素的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。

其他图像是否可以聚焦（悬停）？

2 个答案: