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

假设您要向图像显示标题元素，并且如果您将鼠标悬停在标题元素上，则还要突出显示该图像。你需要移动你的标题＆＃34;图像之前的元素，以便您可以对父元素的悬停状态或标题元素做出反应，以突出显示图像。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: