Html Question posted in
Some basic documentation can be found here.

Html – How would i change a style of an image by hovering a parent div?

I want to change the background color of an image inside a div whenever i hover any point of the div.

something like:

.divskins{
    background-color: #13191c;
    width: 240px;
    height: 300px;
}
.divskins img{
    width: 240px;
    height: 240px;
    margin: 0;
    background-color: #4c0907;
}
.divskins:hover{
    img > background-color: #8e180c;
}

i tried to use img > background-color: #8e180c; but of course didn’t work

Tags:

2

Answers


  1. 0

    I hope it’s not the answer, but you need to read CSS documentation. You need to use:

    .divskins:hover img {
    background-color: #8e180c;
}

    But why changing the background-color of an image ? I don’t understand

    Login or Signup to reply.
  2. 0

    You need to add :hover pseudo-class for the parent divskins and then apply the background color change to the child img

    .divskins{
    background-color: #13191c;
    width: 240px;
    height: 300px;
}
.divskins img{
    width: 240px;
    height: 240px;
    margin: 0;
    background-color: #4c0907;
}
.divskins:hover img{
    img > background-color: #8e180c;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search