Problem with Hover in CSS

Asked

Viewed 3,981 times

3

I have a table and I want each cell to be highlighted when the mouse is over. However, it is not working. It should be considered that I am using bootstrap as a basis for page styles and therefore I believe it is conflict between my css and that of bootstrap.

The table is defined as follows::

<table class="table table-bordered">
    <tr>
        <td align="center" class="info_table"><div onclick="invDir(0);" id="gpio0">-</div></td>
        <td align="center" class="info_table"><div id="gpio1">-</div></td>
        <td align="center" class="info_table"><div id="gpio2">-</div></td>
        <td align="center" class="info_table"><div id="gpio3">-</div></td>
        <td align="center" class="info_table"><div id="gpio4">-</div></td>
        ...

I defined the class info_table to highlight and prevent the value from being selected. And this is the css of info_table:

.info_table 
{
    width: 5%;
    color: #d44637;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.info_table  : hover
{
    background-color: #f1c40f;
}

The problem is that simply the hover doesn’t work.

OBS: The contents of div's gpio* is dynamically loaded.

html css twitter-bootstrap
  • 2

    Your code has spaces here? .info_table : hover - cannot have, must be .info_table:hover

  • 3

    @Sergio is right, that’s exactly the problem. http://jsfiddle.net/LrXcz/

  • @Sergio posts an answer :)

  • @Pauloroberto, I’ll wait for Lucas' answer, I’m not sure that’s the only problem. boostrap is like a firewall, sometimes it’s hard to do what you want :)

  • @Sergio was the same space. Post your answer.

  • Avoid using spaces between classes ex: figure.foto_caption:Hover OBS:(In some browsers it didn’t work in my code)

Show 1 more comment

3 answers

4


To use a selector :hover in the element <td> he must be glued to the class .info_table. So you can use, no spaces:

.info_table:hover{

Example

1

It may be that boostrap is overwriting your CSS. Try putting the !importantein front of the rule :hover. Ex:

.info_table:hover
{
    background-color: #f1c40f !important;
}

0

I believe you have something overlaying your color attribute. Use the Browser Inspecter to see who is overriding your code. ***But before that, try using the class info_table in DIV who is inside the TD.

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.