Question

我正在使用the code from CSS-Tricks创建星级评分。此外，我希望用户能够点击星标并转到链接。这不行。

我的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: "\2605";
    position: absolute;
}

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

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

问题是，当我尝试点击链接时，没有任何反应。甚至光标也不会改变为指针。我猜这是因为当我将它悬停时，它被置于链接顶部..？它是否正确？我该如何解决这个问题？

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: "\2605";
    position: absolute;
}

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

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

Live example

Answer 2

删除跨度并使用a标签。然后用标签替换CSS中的span标签，它应该按预期工作。这就是我所做的，它的运作方式就像我想的那样。

<html>

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

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

.rating > a:hover:before, .rating > a:hover ~ a:before {
    content: "\2605";
    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/

：悬停：之前不能使用链接

3 个答案: