Forums
View unanswered posts | View active topics It is currently Fri Oct 31, 2014 1:59 pm



Reply to topic  [ 9 posts ] 
 :hover behaviors 
Author Message

Joined: Tue Aug 31, 2010 3:02 pm
Posts: 5
Post :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


Wed Sep 01, 2010 7:04 am
Profile

Joined: Tue Aug 31, 2010 3:02 pm
Posts: 5
Post 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


Wed Sep 01, 2010 10:12 am
Profile

Joined: Tue Aug 31, 2010 3:02 pm
Posts: 5
Post Re: :hover behaviors
Nobody can help ??


Wed Sep 01, 2010 3:56 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: :hover behaviors
Patience, patience. I haven't had an opportunity to try out your code and debug this yet.


Thu Sep 02, 2010 12:04 pm
Profile

Joined: Tue Aug 31, 2010 3:02 pm
Posts: 5
Post 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 ;-)


Thu Sep 02, 2010 4:25 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post 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.


Fri Sep 03, 2010 8:46 am
Profile

Joined: Fri Nov 04, 2011 1:10 am
Posts: 1
Post Re: :hover behaviors
i meet the same problem like you.
i copy your code but also couldn't display correct on hover elements.


Fri Nov 04, 2011 1:12 am
Profile

Joined: Sun Mar 10, 2013 11:54 pm
Posts: 1
Post 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%));
}


Mon Mar 11, 2013 12:06 am
Profile

Joined: Mon Mar 11, 2013 7:55 am
Posts: 1
Post Re: :hover behaviors
Try to remove :behavior from hover def.


Mon Mar 11, 2013 7:56 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 9 posts ] 

Who is online

Users browsing this forum: Exabot [Bot], Google [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.