Может ли изображения под другим иметь фокус (для зависания)?

У меня есть страница-полную иконки, давайте назовем их A, B, C и т.д. Они выкладываются как:Может ли изображения под другим иметь фокус (для зависания)?

A, B, C, D, E,

F, G, Н, I, J

к, L, M, N .. и т.д.

При наведении-над одним, он получает Z-индекс: +1 и увеличивается до 2,5 раза размер - следовательно, если мы нависаем над A, он увеличивается & полностью затуманивает B и F и G.

Поэтому, чтобы увидеть следующий пример, например В один должны переместить мышь от увеличенной версии А (в этот момент другого изображения с увеличением), а затем переместите мышь обратно к 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

Вам следует подумать о том, чтобы сделать это с помощью JS, где вы отключите любую анимацию, когда она действует, и за небольшую задержку. Это даст пользователю достаточно времени для взаимодействия. Можете ли вы опубликовать скрипку с кодом? –

Это может дать вам некоторые идеи ... может быть, пара принципов здесь с помощью setInterval или каким-то другим способом дросселировать, проверяя, что находится под курсором, когда оно перемещается по расширенному изображению. http://stackoverflow.com/a/17978065/1998238 – wwwmarty

Проблема заключается в том, что элементы .F1 по-прежнему находятся в состоянии зависания, даже когда мышь находится «снаружи» их области, если дочерний элемент (.I1) зависает.

Существует способ обойти проблему, хотя это немного хаки, поскольку для этого необходим дополнительный элемент 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- index: 2), который «чувствует» зависание, но правила CSS применяются к .I1 через селектор CSS (~).

источник

2014-09-10 21:13:45 JHoffmann

Блестяще и спасибо @JHoffmann работает. Из интереса, почему вы использовали: .F1> .hoverme: hover ~ .I1 {...} вместо: .hoverme: hover ~ .I1 {...} – user801347

Не нужно было добавлять .F1> часть, но я просто продолжал использовать ее, как другие правила, используемые ею, и мне нравится делать похожие правила похожими :-). – JHoffmann

Спасибо всем - я получил все это, а затем протестировал его в ie8 и .F1> .hoverme: hover ~ .I1 {...} селектора НЕ работают. Но я читал, что ребенок и общие селекционеры-братья должны работать в ie8. Может кто-нибудь подтвердить пожалуйста? – user801347

Вы можете поместить полностью прозрачные элементы поверх исходных изображений (с тем же плавающим стилем) и создать 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

Привет, ответ и скрипка обновляются. – Fenistil

Может ли изображения под другим иметь фокус (для зависания)?

ответ

Смежные вопросы