I am trying to change a glyphicon color when I hover the table row. The following CSS changes all of the other td's font color except the glyphicon. I am using bootstrap 3.
CSS:
.table-custom-hover > tbody > tr:hover {
background-color: #DD4814;
color: #fff;
}
HTML:
<tr>
<td></td>
</tr>
Try something like this. Target a .
.table-custom-hover > tbody > tr:hover a,
.table-custom-hover > tbody > tr:hover {
background-color: #DD4814;
color: #fff;
}
<td></td>
Use <i> for the icon and wrapped it with <a> this way:
<tr>
<td a href="#">Test</td>
<td><i class="glyphicon glyphicon-cog"></i></td>
</tr>
Related
I'm facing a problem with css about changing a class inside an hover element.
I have a simple table with a "text-success" class in a column, and also, I have an css on "tr:hover" to change the table row "background-color". The problem is the "text-success" is not well shown over the "background-color" hover, so I would like to chnage the color "text-success" only when the row is hovered. It is possible to do by CSS only?
Here the example
<div class="d-flex">
<table style="width:100%;" class="table tablaDashboard">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td> {{user['name']}} </td>
<td> {{user['age']}} </td>
<td class="text-success"> {{user['mark']}} </td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<style>
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
</style>
Thanks a lot!!
I don't understund your code run with :
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:#ffffff; }
see it on CodePen :
https://codepen.io/alexis-g/pen/OJMjPJq
I use bootstrap and datatable.
I created this class.
.nonCompliant{
background: #de5d5d;
}
It put on the tr of some row of the table.
Would like to put another color when nonCompliant class is displayed and hover event
tried
table#samplesTestsTable.dataTable tbody tr:hover > .nonCompliant{
background: #c11f1f;
}
and
tr:hover > .nonCompliant{
background: #c11f1f;
}
without good result.
Edit code of the row
<tr role="row" class="nonCompliant even"><td data-id="19475A" class="sorting_1" tabindex="0">190475A</td><td>2019-04-23</td></tr>
If the .nonCompliant class is modifying the tr itself, then
.nonCompliant:hover {
background: #c11f1f;
}
should work. Otherwise if .nonCompliant is on a direct child element of the tr, like a td,
tr:hover .nonCompliant {
background: #c11f1f;
}
or the child selector you're already using.
If you are applying the class directly to the hr tag, then you can just do this:
.someclass:hover{
background-color: yellow;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td class="someclass">
Hello2
</td>
<td>Lastname</th>
<td>Age</th>
</tr>
</table>
else, if its a direct child you could to this:
tr:hover .nonCompliant {
background-color: yellow;
}
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
I could do this with Javascript but I how would I go about achieving this with CSS only:
<table>
<tr>
<td>
Hover me
</td>
</tr>
<tr>
<th id="info">
Info
</th>
</tr>
</table>
All I want is when the anchor link gets hovered on, the table header "info" gets affected. And these are what I've tried to no avail:
a:hover #info
{
text-decoration: underline;
}
a:hover table tr > th#info
{
text-decoration: underline;
}
What did I miss?
You can't do this by selecting the link but you can target the parent tr
This is because there is no parent selector or previous sibling selector
tr:hover + tr th#info {
text-decoration: underline;
background: red;
}
a {
display: inline-block
}
<table>
<tr>
<td>
Hover me
</td>
</tr>
<tr>
<th id="info">
Info
</th>
</tr>
</table>
css
.table-striped > tbody > tr:nth-child(1) > td,
.table-striped > tbody > tr:nth-child(1) > th {
background-color: #4289A9;
font-weight:800;
color:white;
font-size:12px;
}
html
<table class="table table-striped">
<tr >
<td class="h6" >text change according to css </td>
<td class="h6" >text font style not changed </td>
</tr>
</table>
Using Bootstrap 3. Strangely the first td changes according to the CSS but 2nd td font style does not change, is the CSS missing something?