:hover:before 不适用于 link

Question

我正在使用 the code from CSS-Tricks 创建星级。此外，我希望用户能够单击一颗星并转到 link。虽然这不起作用。

我的HTML:

<div class="rating">
    <span><a href="index.php?var=1">☆</a></span>
    <span><a href="index.php?var=2">☆</a></span>
    <span><a href="index.php?var=3">☆</a></span>
    <span><a href="index.php?var=4">☆</a></span>
</div>

这是在样式表中：

.rating > span:hover:before {
    content: "05";
    position: absolute;
}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating > span:hover:before, .rating > span:hover ~ span:before {
    content: "05";
    position: absolute;
}

问题是，当我尝试点击 link 时，没有任何反应。甚至光标也没有变成指针。我猜那是因为当我将它悬停在 link 之上时，它被放在了上面......？这个对吗？我该如何解决这个问题？

Answer 1

尝试将 span 放在 a 元素内，而不是将 a 放在 span 内：

<div class="rating">
    <a href="index.php?var=1"><span>☆</span></a>
    <a href="index.php?var=2"><span>☆</span></a>
    <a href="index.php?var=3"><span>☆</span></a>
    <a href="index.php?var=4"><span>☆</span></a>
</div>

此外，像这样更新您的 CSS 选择器：

.rating > a:hover:before {
    content: "05";
    position: absolute;
}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating > a:hover:before, .rating > a:hover ~ a:before {
    content: "05";
    position: absolute;
}

Live example

Answer 2

删除 span 并只使用 a 标签。然后用 a 标签替换 CSS 中的 span 标签，它应该可以按预期工作。这是我所做的，它的工作原理与我想的一样。

<html>

<head>
<style>
  .rating > a:hover:before {
    content: "05";
    position: absolute;
}

.rating {
    unicode-bidi: bidi-override;
    direction: ltr;
}

.rating > a:hover:before, .rating > a:hover ~ a:before {
    content: "05";
    position: absolute;
}
</style>
</head>

<body>
<div class="rating">
    <a href="index.php?var=1">☆</a>
    <a href="index.php?var=2">☆</a>
    <a href="index.php?var=3">☆</a>
    <a href="index.php?var=4">☆</a>
</div>
</body>
</html>

Answer 3

可以使用Javascript吗？我能够使用以下方法使其正常工作：

<div class="rating">
  <span onclick="alert('4');">☆</span>
  <span onclick="alert('3');">☆</span>
  <span onclick="alert('2');">☆</span>
  <span onclick="alert('1');">☆</span>
</div>

您可以创建一个取值 1-4 的函数，并根据提供的值更改位置，而不是警报。

https://jsfiddle.net/kevinbburns/oxgr32yn/2/

:hover:before 不适用于 link

:hover:before does not work with a link

html

css

hover