CSS3 PIE Forums
http://css3pie.com/forum/

:hover behaviors
http://css3pie.com/forum/viewtopic.php?f=3&t=154
Page 1 of 1

Author:  Pierrot [ Wed Sep 01, 2010 7:04 am ]
Post subject:  :hover behaviors

Hi everybody,

i'm starting a website in HTML5 and CSS3, and i use CSS3PIE to get it.
I'm working on the menu (navigation of the website) and have some problem with :HOVER behavior. My code works well in Chrome, Safari and FireFox. But in IE the :HOVER don't work correctly.
I've tried to play with position:relative, z-index, i know that IE won't apply behaviors if they're specified in a :hover selector, so i've tried to apply the behavior using the main selector, but no effect....
Maybe i'm doing something wrong or missing something...
Here is my html5 code:
[code
<body>
<div id="container">
<header id="entete" role="banner">
<h1>
<a title="Accueil"
href="#">LOGO A VENIR</a>
</h1>
</header>
<nav id="navigation" role="navigation">
<a title="Accueil" href="#">HOME</a>
<a title="Ce que nous faisons" href="#">NOS PRESTATIONS</a>
<a title="Ils nous ont fait confiance" href="#">NOS REFERENCES</a>
<a title="Besoin d'aide ?" href="#">FORUM</a>
<a title="Nous contacter ?" href="#">CONTACTEZ NOUS</a>
<a title="Nous contacter ?" href="#">CONTACTEZ NOUS</a>
</nav>
</div>
</body>
[/code]

And here's my css(3) code (i'm using first a reset css):
Code:
BODY{
background:#FFF no-repeat fixed center top;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
color:#000;
outline: none;
}
#container{
display:block;
margin: 0 auto;
width: 1000px;
background: #FFF;
}
header{
height: 55px;
}
#navigation{
height: 36px;
line-height: 36px;
position: relative;
background: #FFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFF), to(#c3c3c3));
background: -moz-linear-gradient(#FFF, #c3c3c3);
background: linear-gradient(#FFF, #c3c3c3);
-pie-background: linear-gradient(#FFF, #c3c3c3);
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
behavior: url(CSS/PIE.htc);
border-top: 1px solid #ececec;
border-right: 1px solid #ececec;
border-left: 1px solid #ececec;
border-bottom: 1px solid #999999;
}
#navigation a{
color: #808080;
font-weight: bold;
font-size: 14px;
display: inline-block;
padding: 0 15px;
behavior: url(CSS/PIE.htc);
}
#navigation a:HOVER {
color: #FFF;
background: #1a1a1a;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ececec), to(#1a1a1a));
background: -moz-linear-gradient(#ececec, #1a1a1a);
background: linear-gradient(#ececec, #1a1a1a);
-pie-background: linear-gradient(#ececec, #1a1a1a);
behavior: url(CSS/PIE.htc);
}


I wonder if the problem is not caused because I already use a gradient background on the element "navigation" (nav element in html5).

if someone would give me a solution for this problem, I'd be very grateful because I'm going crazy...

here's a link where you can see the problem
http://www.webart-technologies.com/index2.php

thank you

Author:  Pierrot [ Wed Sep 01, 2010 10:12 am ]
Post subject:  Re: :hover behaviors

Hi,

a new thing now...
I just add a position:relative on the :hover behavior and it works... but just once.
When I pass the cursor over the behavior :hover works one time, but when I pass over again, nothing happens, the effect is no longer displayed.

Thanx for your help

Author:  Pierrot [ Wed Sep 01, 2010 3:56 pm ]
Post subject:  Re: :hover behaviors

Nobody can help ??

Author:  jason [ Thu Sep 02, 2010 12:04 pm ]
Post subject:  Re: :hover behaviors

Patience, patience. I haven't had an opportunity to try out your code and debug this yet.

Author:  Pierrot [ Thu Sep 02, 2010 4:25 pm ]
Post subject:  Re: :hover behaviors

excuse my impatience, but I do not stop at failure...
I found a solution that seems to work, but i can't understand why, so if you can explain it to me(us)

:hover behavior does not apply in the code that you can see above... but if i add a first gradient-background to the #navigation a (which is the same gradient-background as div #navigation), the :hover behavior apply correctly

code is better than words:
HTML5 still the same:

Code:
<body>
<div id="container">
<header id="entete" role="banner">
<h1>
<a title="Accueil"
href="#">LOGO A VENIR</a>
</h1>
</header>
<nav id="navigation" role="navigation">
<a title="Accueil" href="#">HOME</a>
<a title="Ce que nous faisons" href="#">NOS PRESTATIONS</a>
<a title="Ils nous ont fait confiance" href="#">NOS REFERENCES</a>
<a title="Besoin d'aide ?" href="#">FORUM</a>
<a title="Nous contacter ?" href="#">CONTACTEZ NOUS</a>
<a title="Nous contacter ?" href="#">CONTACTEZ NOUS</a>
</nav>
</div>
</body>


and here's the new css:

Code:
BODY{
background:#FFF no-repeat fixed center top;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
color:#000;
outline: none;
}
#container{
display:block;
margin: 0 auto;
width: 1000px;
background: #FFF;
}
header{
height: 55px;
}
#navigation{
height: 36px;
line-height: 36px;
position: relative;
background: #FFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFF), to(#c3c3c3));
background: -moz-linear-gradient(#FFF, #c3c3c3);
background: linear-gradient(#FFF, #c3c3c3);
-pie-background: linear-gradient(#FFF, #c3c3c3);
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
behavior: url(CSS/PIE.htc);
border-top: 1px solid #ececec;
border-right: 1px solid #ececec;
border-left: 1px solid #ececec;
border-bottom: 1px solid #999999;
}
#navigation a{
color: #808080;
font-weight: bold;
font-size: 14px;
display: inline-block;
padding: 0 15px;
[b]background: #FFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFF), to(#c3c3c3));
background: -moz-linear-gradient(#FFF, #c3c3c3);
background: linear-gradient(#FFF, #c3c3c3);
-pie-background: linear-gradient(#FFF, #c3c3c3);[/b]
behavior: url(CSS/PIE.htc);
}
#navigation a:HOVER {
color: #FFF;
background: #1a1a1a;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ececec), to(#1a1a1a));
background: -moz-linear-gradient(#ececec, #1a1a1a);
background: linear-gradient(#ececec, #1a1a1a);
-pie-background: linear-gradient(#ececec, #1a1a1a);
behavior: url(CSS/PIE.htc);
}


I'm happy to have fixed it but would like to understand why it work like that

Note that the code works for IE7 and IE8, but for IE6 i have to change the display: inline-block in the #navigation a, by a float:left. Cause IE6 don't support inline-block behavior

Thank you for your help Jason, I am still eager to know your impressions ;-)

Sorry if my english is poor, i try the best as i can ;-)

Author:  jason [ Fri Sep 03, 2010 8:46 am ]
Post subject:  Re: :hover behaviors

This is definitely a bug in PIE. It appears that when the non-hover styles do not contain any CSS3, PIE stops rendering after the first hover. I've opened ticket http://github.com/lojjic/PIE/issues/issue/75 to track getting it fixed. Thanks for reporting the issue, and I'm glad you found a workaround for the time being.

Author:  nus [ Fri Nov 04, 2011 1:12 am ]
Post subject:  Re: :hover behaviors

i meet the same problem like you.
i copy your code but also couldn't display correct on hover elements.

Author:  jussjosh [ Mon Mar 11, 2013 12:06 am ]
Post subject:  Re: :hover behaviors

Thanks Pierrot! It works for me, too, now!

I had a slightly different scenario, but because I'm having a parent element have the :hover and the child "a" has the PIE attached.

All I did was add the PIE (htc) reference to the default "a" class, which I didn't have before because I didn't need it, since my graident background is only on the :hover a state.

I'm using SASS & Compass so it looks something like this:

Code:
// Default Link Style:
.nav-item > a {
   position: relative;
   display: block;

   @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
}

// Hover Link Style:
.nav-item:hover > a {
   @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
   @include background(linear-gradient(top, #e2e7eb 0%, #d4dde4 9%, #cfd8df 15%, #d0d7df 18%, #e3e4e9 39%, #e7e6eb 55%, #e6e1e7 70%, #d5cad5 100%));
}

Author:  Zolgreen [ Mon Mar 11, 2013 7:56 am ]
Post subject:  Re: :hover behaviors

Try to remove :behavior from hover def.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/