Question

当我将鼠标悬停在<span>上时，我想知道如何展示图片。

这是我的代码：

<html>
    <head>
        <style>
            .img { display: none; }
            .show:hover + .img { display: block; }
        <style>
    </head>
    <body>
    <h1>Hello there how are you <span class="show">guys</span></h1>
    <img src="/image.jpg" class="img">
    </body>
</html>

是否可以仅使用css进行此操作？

Answer 1

CSS无法处理这种情况，因为这两个元素不是直接兄弟。要实现这一点，您需要至少使用Javascript，或者更好地使用JQuery。

Answer 2

您可以将span设置为h1，并执行以下操作：

代码：

<html>
    <head>
        <style>
            .img { display: none; }
            .show:hover + .img { display: block; }
        <style>
    </head>
    <body>
    <h1>Hello there how are you</h1><span class="show">guys</span>
    <img src="/image.jpg" class="img">
    </body>
</html>

Answer 3

你需要一点点JS，我在原生JS中做了，如果你使用它，你将不会有jQuery膨胀。

<h1>Hello there how are you <span id="pic1">guys</span></h1>
<div id="pic2"><img     src="http:
//news.images.itv.com/image/file/519020/stream_img.jpg"
width:300 height=200></div>

http://codepen.io/damianocel/pen/gaqPQY

悬停在跨度上时显示图像

3 个答案: