css - 在悬停元素时更改悬停时的图像属性，在悬停图像时触发

Question

我想使用一个代码，它能够在悬停元素时更改图像属性，该元素在悬停图像时触发。我只能在悬停时更改触发元素属性。我读到有一个问题，如果应该更改的元素位于悬停元素之前，则无法完成 - 这就是我的情况。在这种情况下，我只想添加红色轮廓(我知道我可以更改任何内容，这是示例)。

Here is Fiddle

    #overimage
{
position: relative;
line-height: 0;
font-size: 0;
}

.Xevoz_Showdown
{
display: none;
}

.onlinegameimage:hover
{
outline: solid 1px red;       
}

.Xevoz_Showdown_cont:hover .Xevoz_Showdown
{
display: inline;
position: absolute; 
bottom: 82px; 
left: 10px; 
min-height: 25px; 
width: 100px; 
font: 14px/1.0 Times New Roman; 
color: white; 
background-color: rgba(0,0,0,0.8);
}

<span id="overimage">

<a href="http://www.superhry.cz/games/300/" target="_blank">

<span class="Xevoz_Showdown_cont">
<img class="onlinegameimage"src="http://www.catchamouse.ic.cz/Xevoz%20showdown.jpg"alt=Xevoz_showdown style="margin: 10px"><span class="Xevoz_Showdown">Xevoz<br />Showdown</span>
</span>

Answer 1

假设您要向图像显示 title 元素，并且如果将鼠标悬停在 title 元素上，您还想突出显示该图像。您需要将“title”元素移到图像之前，以便您可以对父元素的悬停状态或 title 元素使用react以突出显示图像。

#overimage {
    position: relative;
    line-height: 0;
    font-size: 0;
}
.Xevoz_Showdown {
    display: none;
}
.Xevoz_Showdown_cont:hover .Xevoz_Showdown {
    display: inline;
    position: absolute;
    left: 10px;
    min-height: 25px;
    width: 100px;
    font: 14px/1.0 Times New Roman;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
}
.Xevoz_Showdown:hover + .onlinegameimage, .onlinegameimage:hover {
    outline: solid 1px red;
}

<span id="overimage">

<a href="http://www.superhry.cz/games/300/" target="_blank">

<span class="Xevoz_Showdown_cont">
    <span class="Xevoz_Showdown">Xevoz<br />Showdown</span>
    <img class="onlinegameimage"src="http://placehold.it/50x50" />
</span>