Onmouseover DIV,更改图像边框颜色

Question

当我悬停放置图像的DIV时,我需要帮助改变图像边框颜色.所以这应该相当简单,但我不知道如何开始.我的(简化)代码如下所示:

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

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


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

当我将鼠标悬停在整个div上时,我希望能够更改图像的边框颜色.现在我可以在悬停图像时更改图像边框的颜色,但是当我将鼠标悬停在文本上时必须同样适用,因此在DIV上移动图像边框颜色应该更改.

任何有好主意的人都会选择最简单的解决方案.这是一个wordpress博客,所以添加javascripts使它更复杂一点.

Answer 1

给你div一个id或class让你的选择器更具体:

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

然后你可以使用:

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