Hover Div won't work in IE?

Discussion in 'CSS' started by le007, Apr 29, 2009.

0
  1. #1
    Hi all - trying to change div's background upon hover. It works in FF.
    Thanks,
    I've tried the below:

    .block {
width: 200px;
height: 200px;
background-color: #FDF1D7;
border: 1px solid #FFAE00;
}

.block a { display: block; width: 100px height: 100px;}
.block a:hover {background-color: #DD6E05;}

.block:hover{
background-color: #DD6E05;
    Code (markup):
     
    le007, Apr 29, 2009 IP
  2. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #2
    Any ideas?
     
    le007, Apr 30, 2009 IP
  3. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Umm well hover in IE6 does not work, only except a link tag. But your code should work in IE7.
     
    markupdude, Apr 30, 2009 IP
  4. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #4
    Thanks for reply - need an ie6 work too though
     
    le007, Apr 30, 2009 IP
  5. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    google 4 hover.htc there's java equivs too.
     
    007c, Apr 30, 2009 IP
  6. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    In such a case what i use JQuery Javascript library for ease of use.

    Add these in your <head> part :

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
    HTML:
    (Folder/file names can be changed as per your case)

    Now in main.js write this :

    $(document).ready(function(){
    
    $('.block'):hover(
      function() {
        $(this).addClass('active');
      },
      function() {
        $(this).removeClass('active');
      }
    );
    
});
    HTML:
    And in CSS add this :

    .block:hover, .blockHover {
  background-color: #DD6E05;
}
    HTML:
     
    markupdude, Apr 30, 2009 IP
  7. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #7
    Sweet - thanks guys for the replies, I googled .htc and got reviews 007c. The example is awesome markupdude :D
     
    le007, Apr 30, 2009 IP
  8. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #8
    Sweet - thanks guys for the replies, I googled .htc and got reviews 007c. The example is awesome markupdude :D
     
    le007, May 1, 2009 IP
  9. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #9
    .htc hands down. For the sake of everybody who likes sites to load the same day they open them, do not use Jquery.
     
    rochow, May 3, 2009 IP
  10. fisherking

    fisherking Peon

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You can only apply hover effects to anchor elements in most versions of internet explorer, but I did not know about the css behavior file that you guys mention, I just use a Javascript solution most of the time.
     
    fisherking, May 4, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Stomme poes, May 7, 2009 IP