Reputation: 105
I need to change the colour of the button when I hover over the tr
for example when hover over the first row, the button in it should have a different background colour than the other buttons.
this HTML code:
<tr onmouseover="hoverMe()" onmouseout="outMe()">
<input type="button" class="btn-table-book" value="book">
</tr>
<tr onmouseover="hoverMe()" onmouseout="outMe()">
<input type="button" class="btn-table-book" value="book">
</tr>
<tr onmouseover="hoverMe()" onmouseout="outMe()">
<input type="button" class="btn-table-book" value="book">
</tr>
java script code
<script>
function hoverMe(){
$(".btn-table-book").css("background-color","#F0562B");
$(".btn-table-book").css("color","#FFF");};
function outMe(){
$(".btn-table-book").css("background-color","#DDD");
$(".btn-table-book").css("color","#222");
};
after I run this code when I hover over any tr
all button's colour change at the same time and I don't need this.
Upvotes: 1
Views: 62
Reputation: 144
If i understand your question what you need is this:
$('#tableId').find('tr').each(function(i){
$(this).css("background-color","#DDD");
$(this).css("color","#FFF");
$(this).hover(function(){
$(this).css("background-color","#F0562B");
$(this).css("color","#222");
});
});
This will loop inside the first element and it will add the hover functionallity to each on of your tr elements.
Upvotes: -1
Reputation: 21505
The :hover
doesn't have to be on the last element of the selector. Here's how to do that in plain CSS:
tr .btn-table-book {
background-color: #DDD;
color: #222;
}
tr:hover .btn-table-book {
background-color: #F0562B;
color: #FFF
}
Upvotes: 3