Reputation:
I have a site using the jquery responsive dataTables with bootstrap styling and whenever a user clicks on the green plus button a drop down appears and then when you hover over that drop down, it matches the background of the site like so.
Ill try and post the code I think is relevant, lemme know if I miss something:
html:
<body>
<div class="container">
<table id="PastFiveYears" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<h2> QB stats from 2009 to current {{curYear}} season</h2>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{p.player.last_name}}</td>
<td>{{p.player.first_name}}</td>
</tr>
</tbody>
</body>
css:
body {
background-image: url("green_cup.png");
position: relative;
}
tr:nth-child(even) {
background-color:#f1f1f1 !important
}
th{
background-color:#f1f1f1
}
So i guess what I'm asking really is how can I change the background of the hover dropdown for when I hover over it?
Thanks for any and all help! Sorry if these questions are trivial but I tried searching and I wasn't really sure what exactly I'm trying to do
Upvotes: 0
Views: 861
Reputation: 345
if you are in chrome, so press on that row with the right button in the mouse and press inspect element. now you can mark it as hover when pressing the pin button. than you need to see from where it inherit the style. now you have 2 options: 1) override the style, for examlpe
<style>
table
{
color:red;
}
table::hover
{
color:green;
}
</style>
it will make all table with red color. and green in hover
2) you can search for the css and change it their
goodluck :-)
Upvotes: 1