javascript 把一个链接变成一个div？

wr98u20j 于 2023-02-18 发布在 Java

关注(0)|答案(2)|浏览(170)

我正在尝试制作一个网页，当用户将鼠标悬停在文本上时，会出现一个图像。我找到了一个工作代码，但它显示为一个链接，我不希望它这样。我的想法是有一个项目列表，当用户将鼠标悬停在每个项目上时，会出现一个新的图像。

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

<div class="hover_img">
    <a href="#">flippe flute<span><img src="//picsum.photos/200?c=1" alt="image" height="200" /></span></a><br>
    <a href="#">pottery flute<span><img src="//picsum.photos/200?c=2" alt="image" height="200" /></span></a>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75470037/turning-an-a-link-into-a-div

2条答案

按热度按时间

yhived7q1#

将a标记替换为div标记，如下所示

.hover_img div { position:relative; }
.hover_img div span { position:absolute; display:none; z-index:99; }
.hover_img div:hover span { display:block; }

<div class="hover_img">
    <div>flippe flute<span><img src="//picsum.photos/200?c=1" alt="image" height="200" /></span></div>
    <div>pottery flute<span><img src="//picsum.photos/200?c=2" alt="image" height="200" /></span></div>
</div>

赞(0）回复(0）举报 2023-02-18

kt06eoxx2#

你可以使用和问题相同的代码，只需要做一些我提到的修改，不需要使用div，只需要把它的样式设置成列表项的样子。

.hover_img a { position:relative; font-family: Arial, sans-serif; padding: 40px 15px; border: 1px solid #ddd; border-bottom:none; display: block; color: #666; text-decoration: none; }
.hover_img a:first-child { border-radius: 10px 10px 0 0; }
.hover_img a:last-child { border-bottom: 1px solid #ddd; border-radius: 0 0 10px 10px; }
.hover_img a span { position:absolute; right: 10px; top: 10px; height:calc(100% - 20px); display:none; }
.hover_img a span img { max-width: 100%; height: auto; max-height: 100%; }
.hover_img a:hover { background-color: #eee; color: #333; }
.hover_img a:hover span { display:block; }

<div class="hover_img">
    <a href="#">flippe flute<span><img src="https://picsum.photos/200?c=1" alt="image" /></span></a>
    <a href="#">pottery flute<span><img src="https://picsum.photos/200?c=2" alt="image" /></span></a>
</div>

希望能满足您的要求。
谢谢

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 把一个链接变成一个div？

2条答案

相关问题

热门标签

最新问答