未加星标

Mouse over hover not working using jQuery

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

I have a incorporated a jQuery mouse over hover function on my site ( click here and scroll down to images with coloured blocks ). I have noticed the hover state image is not visible although I have played around with the Z-index. What is causing this issue?

Below is a snippet of my code.

<div class="shirt-block" style="background:#333334;"> <figure> <img class="shirt col-img-inner" src="img/B0713011sf2.jpg" alt="alt"/> </figure> </div> .shirt-block { width:47%; float:left; margin:0; padding:0; margin-left:2%; min-width:200px; max-width:600px; position:relative; } .shirt-block > figure { margin:0; padding:0; height:100%; position:absolute; top:0; right:0; width:100%; } .shirt-sizer { width:100%; /* same as figure width */ } .shirt { width:100%; position:absolute; top:0; right:0; } .shirt-hover { background:url(http://www.lybstore.com/img/home-hover-bg.png); background-size:cover; position:absolute; top:0; right:0; z-index:100; width:100%; height:100%; opacity:0; } $('figure').append('<div class="shirt-hover"/>'); var $sizer = $("<img/>", {src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAMAAADXLxypAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACBJREFUeNrtwTEBAAAAwiD7p14Hb2AAAAAAAAAAAABcAiWAAAEKyWyqAAAAAElFTkSuQmCC"}).addClass("shirt-sizer"); $('.shirt-block').append($sizer); $('.shirt-hover').hover(function(){ $(this).stop().animate({opacity:1},200); },function(){ $(this).stop().animate({opacity:0},200); });

Problem courtesy of: NewBoy

Solution

This works: >> instead of: $('.shirt-hover').hover(...) <<

$('.shirt-block img').mouseenter(function(){ var $imgHover = $(this).next('.shirt-hover'); $imgHover.width($(this).width()).height($(this).height()).stop().animate({opacity:1},200); }); $('.shirt-hover').mouseout(function(){ $(this).stop().animate({opacity:0},200,function(){$(this).height(0)}); });

And remove: z-index:100; in CSS for .shirt-hover it is useless and make it pass over bottom div.

Solution courtesy of: A. Wolff

Discussion

Just replace

.shirt-hover {

with

.shirt:hover {

So it should be like this

.shirt:hover { background:url(http://www.lybstore.com/img/home-hover-bg.png); background-size:cover; position:absolute; top:0; right:0; z-index:100; width:100%; height:100%; opacity:0; }

Discussion courtesy of: Gautam3164

The pseudo selectors work like this : .shirt:hover , .shirt-hover could never work.

Discussion courtesy of: Georgi-it

Pseudo selectors always use a colon ( : ), never a dash ( - ). Therefore, shirt:hover will work as a replacement.

Instead of jQuery's .hover , you could use .mouseenter and .mouseleave .

Discussion courtesy of: samdy1

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: shirt,hover,width,gt,lt,img,opacity,function,height,courtesy,block,position
分页:12
转载请注明
本文标题:Mouse over hover not working using jQuery
本站链接:https://www.codesec.net/view/604968.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(12)