Onmouseover DIV, change image border color

Question

I need help with changing the image border color when I hover the DIV that the image is placed in. So this should be fairly simple but I'm not sure how to start. My (simplified) code looks like this:

#tilesImage {
    padding: 2px;
    border: 1px solid white;
}

#tilesImage:hover {
    border: 1px solid #3498db;
}


<Div><img id="tileImage" src="img.png">Image description</Div>

I would like to be able to change the border color of the image when I hover the entire div. As it is now I can change the color of the image border when I hover the image, but the same must apply when I hover the text, so onmouseover the DIV the image border color should change.

Anyone with a good idea here, would prefer the easiest possible solution. This is a wordpress blog so adding javascripts makes it a bit more complicated.

Answer 1

Give your div an id or class to make your selector more specific:

<Div id="parentDiv"><img id="tileImage" src="img.png">Image description</Div>

then you can use:

#parentDiv:hover img {
    border: 1px solid #3498db;
}