Problem with hover in CSS

Navigation
3

I have a table and I want every cell to be highlighted when the mouse is over. However, it is not working. It should be considered that I am using bootstrap as the basis for page styles and therefore I believe it is a conflict between my css and 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>
        ...

Set the info_table class to highlight and prevent the value from being selected. And this is 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 just hover does not work.

NOTE: The content of div's gpio * is loaded dynamically.

    
asked by anonymous 11.02.2014 / 23:04

3 answers

3

To use a :hover selector in the <td> element, it must be pasted to the .info_table class. So you can use, without spaces: 

.info_table:hover{

Example

    
12.02.2014 / 07:40
1

It may be that the boostrap is overwriting your CSS. Try to put the !importante in front of the :hover rule. Ex: 

.info_table:hover
{
    background-color: #f1c40f !important;
}
    
12.02.2014 / 00:01
0

I think you have something overlapping its attribute of background. Use the browser inspector to look at who is overriding your code. *** But before that, try to use the info_table class in DIV who is within TD .

    
11.02.2014 / 23:10
How to identify which form has changed the ownership of a component? Syntax error, unexpected keyword_end, expecting end-of-input