javascript - Can images under other have focus (for hovering over)? -
i have page-full of thumbnails, let's call them a,b,c, etc. laid out like:
a,b,c,d,e,
f,g,h,i,j,
k,l,m,n .. etc.
when hover-over one, gets z-index:+1 , enlarges 2.5 times size - hence, if hover on a, enlarges & obscures b , f , g.
therefore next see e.g. b 1 must move mouse away enlarged version of (at point image enlarge) , move mouse b.
hence lots screen 'flashing' etc.
is there way display a, when mouse moves away top-left portion, underlying next in line (b) has focus , enlarges.
i looked @ html's <area> , <map> tags without success.
currently have:
<!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 next line work .f1:hover > .i1 { width:300px; height:auto;position: absolute; z-index:1; left:0px; top:0;} cant 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 - 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 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 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 : 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 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 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> i can use javascript/jquery if needed.
the problem have is, .f1 elements still stays in hover state when mouse "outside" of area, long child element (.i1) hovered.
there way circumvent problem, althoug bit hacky, needs additional div element effect. add additional div element html this:
<figure class="f1"><div class="hoverme"></div><img class="i1" src="..." /></figure> next use following rules 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;} the trick is, using overlay element (with z-index:2) "senses" hover, css rules applied .i1 via css sibling selector (~).
Comments
Post a Comment