html 如何显示超链接列表时，光标移动到一个元素，当我们点击一个超链接，它应该打开一个新的页面

8qgya5xd 于 2022-12-09 发布在其他

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

假设“游戏”是一个文本，当用户将光标移到“游戏”上时，将显示超链接（足球、篮球）

<html>
<head>
    <title>Sports</title>
</head>
<body>
<nav>
    <p> Games</p>
</nav>
<div>
    <a href="">Football</a>
    <a href="">Basketball</a>
</div>
</body>
</html>

我如何才能做到这一点使用HTML和CSS只。
这可能吗？

Html

来源：https://stackoverflow.com/questions/74674778/how-to-displays-list-of-hyperlinks-when-cursor-moves-over-an-element-when-we-cl

2条答案

按热度按时间

9cbw7uwe1#

用悬停效果你可以显示一个文本，你必须在这里添加以下代码。

enter code  <nav class = "myDIV">
<p> Games</p>
</nav>
<div class="hide">
<a href="">Football</a>
<a href="">Basketball</a>
</div>

CSS部分：

.hide {
  display: none;
}

.myDIV:hover + .hide {
display: block;
color: red;
}

要在新页面中打开链接，必须在标记中使用target=blank

赞(0）回复(0）举报 2022-12-09

ct2axkht2#

您有几个选项：

仅使用相邻的同级组合符

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
这一个将兼容几乎任何浏览器，但它使用的技巧，实际上打破了要求..我们正在观察:hover的元素nav，而不是严格的第一个孩子的段落。
第一个

使用：has（）伪类

https://developer.mozilla.org/en-US/docs/Web/CSS/:has
这个方法只能在Chrome〉=105（到目前为止）的情况下使用，但肯定更符合预期，因为只有当nav元素的段落第一个子元素位于:hover上时，它才会触发锚点的可见性
第一次

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何显示超链接列表时，光标移动到一个元素，当我们点击一个超链接，它应该打开一个新的页面

2条答案

仅使用相邻的同级组合符

使用：has（）伪类

相关问题

热门标签

最新问答