SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why CSS hover is not working all the time?

    Hello,

    I want to change the background colors of Table rows when OnMouseOver.
    I have defined this CSS for this:

    .focus {
    font-size: 11px;
    }

    .focus:hover {
    background: #EFF6FF;
    }

    But when I use this CSS class to affect the change in background color when OnMouseOver,
    it works in some Tables and it does not in others.

    For example I have the class = "focus" for the rows of the Table in this page:
    http://www.anoox.com/uc/paid_indexing_s1.php

    But when OnMouseOver a given row the background color is not changing.

    What is the problem?

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    It's working for me. (Chrome user)

    ~TehYoyo

    Edit: Even though I'm using Chrome, which is a very advanced browser, it shouldn't affect hovers in any way.

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It is not working for me. On chrome, FF, or IE.
    Some of the places where I have this new class=focus it is working Ok, but some places such as the URL provided above, it is not!
    What the HEK is going on?
    How to fix this?

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,584
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The problem is taht you placed the hover styles on the <tr> which is always buggy with hover elements . Do you have to use tables for this? You wouldn't run into these hover issues if you used non-table HTML (you aren't displaying tabular data so you shouldn't even be using a table )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, I have to have the hover in the tr since I want it to affect all the tds of that tr, so that the user sees that they are on focus on a given tr which has many tds.

    And yes, I need to use a Table for various reasons. Please do not start on a lecture about how much better CSS is than Table, I have already heard that many times. But at times, such as this, the Table format is really needed for this Job. So with this said, any suggestion to over come this bug of the Web browsers.

    You know the amazing this is that in many Tables this class=focus placed in tr works Ok, but in some Tables such as Table listed above it does not!
    What to do!

    Anoox search engine volunteer

    www.anoox.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,584
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hmm actually I jsut went to the link above and the tr:hover is working. The background color you set on :hover is really not that dark to be seen. #EFF6FF is a light shade of blue. In the screenshot below, I'm hovering on the 3rd row to illustrate this.

    Using FF, though Chrome works too. Is a different color supposed to show up?

    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It wors in all those browsers for me. Have you refreshed the page, cleared the cache etc?

    Maybe you could also try

    Code:
    .focus:hover td {
      background: none repeat scroll 0 0 #EFF6FF;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •