Connecting Tech Pros Worldwide Help | Site Map

:hover not working

Newbie
 
Join Date: Mar 2009
Posts: 24
#1: Sep 26 '09
I have a CSS file that contains a hover element, and it is not working in ANY browser (FF3.5, IE6, GC1, SF3 O9)
Expand|Select|Wrap|Line Numbers
  1. .controls
  2. {
  3. position: absolute;
  4. right: 1px;
  5. top: 2px;
  6. height: 15px;
  7. width: 15px;
  8. background: url('JSi/closeO.png');
  9. }
  10. .controls:hover
  11. {
  12. background: url('JSi/close.png');
  13. }
Newbie
 
Join Date: Mar 2009
Posts: 24
#2: Sep 26 '09

re: :hover not working


Oops, forgot the page:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <style>
  4.         .controls
  5.         {
  6.             position: absolute;
  7.             right: 1px;
  8.             top: 2px;
  9.             height: 15px;
  10.             width: 15px;
  11.             background-image: url('close.png');
  12.         }
  13.         .controls :hover
  14.         {
  15.             background-image: url('close2.png');
  16.         }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div style="position: absolute; width: 300px; left: 100px; top: 100px;">
  21.             <div style="background-color: #0ff">
  22.                 Demo
  23.             <div class="controls"/>
  24.         </div>
  25.     </body>
  26. </html>
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#3: Sep 26 '09

re: :hover not working


I’d say your code works (except IE). you just forgot one thing, to see a change, there must be something to see first.
Newbie
 
Join Date: Mar 2009
Posts: 24
#4: Sep 26 '09

re: :hover not working


Well, it does not work for me.
of note, I don't know what i did, but now It works in firefox if i change the class to a id. I still need it to be a class thoug
Expand|Select|Wrap|Line Numbers
  1.   <html>
  2.        <head>
  3.        <style>
  4.      #controls
  5.      {
  6.             position: absolute;
  7.             right: 1px;
  8.             top: 2px;
  9.             height: 15px;
  10.             width: 15px;
  11.             background-image: url('http://hotmail.com/favicon.ico');
  12.         }
  13.         #controls:hover
  14.         {
  15.             background-image: url('http://google.com/favicon.ico');
  16.         }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div style="position: absolute; width: 300px; left: 100px; top: 100px;">
  21.             <div style="background-color: #0ff">
  22.                 Demo
  23.             <div id="controls"/>
  24.         </div>
  25.     </body>
  26. </html>
Newbie
 
Join Date: Mar 2009
Posts: 24
#5: Sep 28 '09

re: :hover not working


Is this a browser error, or am I doing it wrong?
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#6: Sep 29 '09

re: :hover not working


you should check if <div /> has any visible area, e.g. by applying a border (or using Firebug).
Familiar Sight
 
Join Date: Sep 2008
Posts: 252
#7: Sep 29 '09

re: :hover not working


Instead of using:
Expand|Select|Wrap|Line Numbers
  1. .controls:hover
  2. {
  3.  background: url('JSi/close.png');
  4. }
try:
Expand|Select|Wrap|Line Numbers
  1. .controls a:hover
  2. {
  3.  background: url('JSi/close.png');
  4. }
Also you want to make sure all your DIVs have a closing tag.
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#8: Sep 29 '09

re: :hover not working


Quote:

Originally Posted by ziycon View Post

Also you want to make sure all your DIVs have a closing tag.

if you’re using real XHTML, you’re prompted with an error, if they don’t. HTML will auto-close such elements.
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,561
#9: Sep 30 '09

re: :hover not working


Using <div /> is not valid in HTML and may be interpreted differently in browsers, if at all. That works in XHTML and XML but don't use it in HTML.
Reply