Problem with hover in CSS
I have a table and 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 the basis for the 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 set the Class info_table to highlight and prevent the value from being selected.
And that's 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 hover doesn't work.
Note: the contents of the div's gpio* are loaded dynamically.
3 answers
To use a selector :hover on Element <td> it must be pasted to Class .info_table. So you can use, without spaces:
.info_table:hover{
Example
It may be that boostrap is overwriting your CSS. Try placing the !importante in front of the :hover rule. Ex:
.info_table:hover
{
background-color: #f1c40f !important;
}
I believe it has something overlapping its background color attribute. Use the browser inspector to look at who is overriding your code.*** But before that, try to use the Class info_table in the DIV who is inside the TD.