Question

这是我的HTML代码。

<?php
$a = array('0'=>'a', '1'=>'c');
$b = array('0'=>'b');

print_r(array_merge($a, $b));
/*Array
(
  [0] => a
  [1] => c
  [2] => b
)*/

print_r(array_replace($a, $b));
/*Array
(
  [0] => b
  [1] => c
)*/

这是CSS：

<img src="images/maxicon.png" class="iconimg" width="100%" alt="">
<a href="#"><img src="images/link.png" class="linkimg" alt=""></a>

我已经在stackoverflow上尝试了几种解决方案，但它无法正常工作。我也试过了〜和+方法。我不确定为什么它不起作用。我想要做的是，当我将鼠标悬停在.iconimg上时，我想要.linkimg出现。最初隐藏.linkimg。

Answer 1

如果您使用sprite css标签，则需要使用<img>，否则有时悬停图片可能需要一段时间才能加载。那一刻，用户变得空白。在sprite css中，您只需更改background-position即可。

Answer 2

试试这个;

.iconimg {
    display: block;
}
.iconimg:hover + a {
    display: block;
}
a {
    display: none;
}

这是一个有效的演示https://jsfiddle.net/blasteralfred/Lqa1x753/

Answer 3

你的代码没有以正确的元素为目标，因为.iconimg：hover .linkimg意味着带有类的元素内的.linkimg .iconimg

但是，你的.linkimg是兄弟姐妹的一个孩子，在DOM中是.iconimg的标签。因此，您必须使用兄弟组合器来选择标签内的.linkimg。

.iconimg:hover ~ a .linkimg {
    display: block;
}

.linkimg {
    display: none;
}

.iconimg:hover ~ a .linkimg {
    display: block;
}

<img src="http://dummyimage.com/100x100/000/fff" class="iconimg" width="100%" alt="">
<a href="#"><img src="http://dummyimage.com/50x50/000/fff" class="linkimg" alt=""></a>

实现相同效果的更好方法是将.linkimg放在a标签上。

.linkimg {
    display: none;
}

.iconimg:hover ~ .linkimg { /* .iconimg:hover ~ a.linkimg is also acceptable */
    display: block;
}

<img src="http://dummyimage.com/100x100/000/fff" class="iconimg" width="100%" alt="">
<a class="linkimg" href="#"><img src="http://dummyimage.com/50x50/000/fff" alt=""></a>

Answer 4

你可以这样做：

.linkimg {
    visibility:hidden;
}

.iconimg:hover + a .linkimg {
    visibility: visible;
}

Updated Fiddle

在悬停在另一个对象上时更改显示CSS

4 个答案: