时间戳

首页 > 解决方案 > 鼠标悬停在星星上时点击星级

javascript - 鼠标悬停在星星上时点击星级

问题描述

当我使用 Bootstrap 4 将鼠标悬停在此脚本中的星星上时，我试图显示一个鼠标图标。

这是表格。

<div class="form-group">
<h4>Rate this product</h4>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
 <i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>

<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="product_id" name="product_id" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>

这是Javascript

    $( ".rateButton" ).click(function() {
    if($(this).hasClass('star-grey')) {
        $(this).removeClass('star-grey').addClass('star-highlight star-selected');
        $(this).prevAll('.rateButton').removeClass('star-grey').addClass('star-highlight star-selected');
        $(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
    } else {
        $(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
    }
    $("#rating").val($('.star-selected').length);  //count the num of star selected
});

这就是我希望它看起来的样子https://imgur.com/a/sTkSQR2

标签： javascriptphpcss

解决方案

当我使用 Bootstrap 4 将鼠标悬停在此脚本中的星星上时，我试图显示一个鼠标图标

可以使用下面的 css 将鼠标光标显示为看起来像尖的手（如图所示）。

.rateButton {
   cursor: pointer
}

引导方法

添加role="button"，然后光标变为手形。引导参考

Reboot 包括对 role="button" 的增强，以将默认光标更改为指针。将此属性添加到元素以帮助指示元素是交互式的。这个角色对于元素来说不是必需的，它们有自己的光标变化。

你的代码看起来像

<i role="button" class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>

例子

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<i role="button"> I am an i tag, hovering me should change the cursor to a hand</i>

<br />
<br />
<i> I am an i tag, but I dont have role="button" hovering me WILL NOT change cursor to a hand</i>

如果您不想编辑 html，我更喜欢第一种方法

推荐阅读