{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 \"骚年 ilove 的问题《:hover CSS is not working?》','https://www.manongdao.com/q-840362.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have created a CSS class as follows:
div.ycontent div.ppclisting { background-color:#cccccc; }
div.ycontent div.ppclisting:hover { background-color:#FFE5DF; }
I have applied the above style in one of my page, which is working quite fine in Firefox, IE 7.0+ and in other latest browsers. But When I am applying the same style in another page then its not working.
Can anyone tell me what could be the reason? why its not working in another page.
I got the answer why the :hover was not working on another page. Actually on second page the DOCTYPE tag was not added in the HTML page as below,
Earlier it was simple
<html>tag and due to which :hover on the div was not working. After adding doctype tag as shown above its working for me.Thanks to all of you for help.
If it's working in one place, but not another place, then either it's not being called correctly or it's not being applied correctly.
Use Firebug, and see what properties the element that should have the styles really have. Then check the classnames for typos. Usually, that'll solve the problem as described.
Also, in IE6,
:hoveronly works withaelements. Keep that in mind.Just had a similar problem. Make sure you're stacking correctly! That is, the z-index.
I am in agreeance with Brandon.
I will also add..
If you remove the:
section from your lines, such that it looks like this:
You may find it will work on your other page.
Why? Because you have defined these styles as 'classes'. Classes intend to apply the same style numerous times.
By placing the "div.ycontent" before it, you are essentially 'restricting'/ not utilising the pull potential of CSS classes.
I just had position:absolute on a parent break my :hover's, although it doesn't seem to be an issue as a grandparent. I'm new to all of this so I don't know if that's normal or not.
Amendment: This turned out to be a z-index issue for me. I needed to put -1 on the parent, 0 on any siblings with position specified and 1 on the divs I wanted hover activity for.