Change image and text color when hovering

Question

I have code like this http://jsfiddle.net/enr54x1z/
And when hovering, I want

to change table cell background color to #317EAC
to change text to white color
change cat image to another image

Please HELLPPPP

I can't deal with it. I don't know how to change
color in td:hover — Narek, Mar 29 '15 at 18:08
`td:hover { color: #317EAC; }` this will change the color of the table cell on hover — Abhishek Ghosh, Mar 29 '15 at 18:10
@AbhishekGhosh I know that. But how can I change text color and image — Narek, Mar 29 '15 at 18:10
@Narek : [this post](http://stackoverflow.com/questions/4897737/mouseover-event-to-change-td-background-and-text) will help you change the color of the text in td — Abhishek Ghosh, Mar 29 '15 at 18:13
@AbhishekGhosh Thank you, I will test it later. Really appreciate your work. But I need to also change image to another image when hovering — Narek, Mar 29 '15 at 18:19

Alexei Darmin · Accepted Answer · 2015-03-29T18:26:16.457

1

In order to change the picture you have to remove the img tag and replace it with a div that has a background-image

the td:hover in the CSS is activated once you hover over the <td> element. Thus the following background color is applied on hover.

td:hover{
    background-color:#317EAC;
}

You can extend this to apply other CSS styles when this element is being hovered over. With the following, once the <td> is hovered, we go to a child element and apply the color change CSS.

td:hover p{
  color:white;
}

The same method is used to change the picture on hover:

td:hover .img-block {
  background-image:url("http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg");
}

edited Mar 29 '15 at 18:26

answered Mar 29 '15 at 18:20

Alexei Darmin

2,079
1
18
30

can you also show me the way I can change text color and I leave you "best answer" mark – Narek Mar 29 '15 at 18:22
Sure, give me a second – Alexei Darmin Mar 29 '15 at 18:23

score 0 · Answer 2 · answered Mar 29 '15 at 18:23

0

 <style type="text/css">
     .imgBox { 
    width: 191px; 
    height: 191px; 
    background: url(image-url) no-repeat; } 

    .imgBox:hover 
    { width: 191px; height: 191px; background: 

    url(other-image-url) no-repeat; } 
    </style>

//your markup can be a div inside your td
    <div class="imgBox"> 
    </div>

On image-hover u need to simply give another url of a image!

Here is an example of what you want!

answered Mar 29 '15 at 18:23

Abhishek Ghosh

2,593
3
27
60

Thank you so much for everything but Alexei presented more complete description. Sorry – Narek Mar 29 '15 at 18:28

Change image and text color when hovering

2 Answers2