:hover not working

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • byteit101
    New Member
    • Mar 2009
    • 25
    #1

    :hover not working

    I have a CSS file that contains a hover element, and it is not working in ANY browser (FF3.5, IE6, GC1, SF3 O9)
    Code:
    .controls
{
position: absolute;
right: 1px;
top: 2px;
height: 15px;
width: 15px;
background: url('JSi/closeO.png');
}
.controls:hover
{
background: url('JSi/close.png');
}
    Tags: None
    • byteit101
      New Member
      • Mar 2009
      • 25
      #2
      Oops, forgot the page:
      Code:
      <html>
    <head>
        <style>
        .controls
        {
            position: absolute;
            right: 1px;
            top: 2px;
            height: 15px;
            width: 15px;
            background-image: url('close.png');
        }
        .controls :hover
        {
            background-image: url('close2.png');
        }
        </style>
    </head>
    <body>
        <div style="position: absolute; width: 300px; left: 100px; top: 100px;">
            <div style="background-color: #0ff">
                Demo
            <div class="controls"/>
        </div>
    </body>
</html>

        Comment

        • Dormilich
          Recognized Expert Expert
          • Aug 2008
          • 8694
          #3
          I’d say your code works (except IE). you just forgot one thing, to see a change, there must be something to see first.

            Comment

            • byteit101
              New Member
              • Mar 2009
              • 25
              #4
              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
              Code:
                <html>
       <head>
       <style>
     #controls
     {
            position: absolute;
            right: 1px;
            top: 2px;
            height: 15px;
            width: 15px;
            background-image: url('http://hotmail.com/favicon.ico');
        }
        #controls:hover
        {
            background-image: url('http://google.com/favicon.ico');
        }
        </style>
    </head>
    <body>
        <div style="position: absolute; width: 300px; left: 100px; top: 100px;">
            <div style="background-color: #0ff">
                Demo
            <div id="controls"/>
        </div>
    </body>
</html>

                Comment

                • byteit101
                  New Member
                  • Mar 2009
                  • 25
                  #5
                  Is this a browser error, or am I doing it wrong?

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      you should check if <div /> has any visible area, e.g. by applying a border (or using Firebug).

                        Comment

                        • ziycon
                          Contributor
                          • Sep 2008
                          • 384
                          #7
                          Instead of using:
                          Code:
                          .controls:hover
{
 background: url('JSi/close.png');
}
                          try:
                          Code:
                          .controls a:hover
{
 background: url('JSi/close.png');
}
                          Also you want to make sure all your DIVs have a closing tag.

                            Comment

                            • Dormilich
                              Recognized Expert Expert
                              • Aug 2008
                              • 8694
                              #8
                              Originally posted by ziycon
                              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.

                                Comment

                                • drhowarddrfine
                                  Recognized Expert Expert
                                  • Sep 2006
                                  • 7434
                                  #9
                                  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.

                                    Comment

                                    Previous template Next
                                    Working...