在输入字段鼠标悬停显示工具提示

Question

当我们将鼠标悬停在任何要显示工具提示的星上时，我正在评分星 到目前为止我试图喜欢这个 jquery 中有一个问题 我无法定位正确的类名 我不知道如何写那堂课。我使用了输入类型单选和标签，我将如何在 jquery 中加载此属性，任何人都可以建议我实现该功能。

在此先感谢...

$(document).ready(function () {
    $("input[name=rating]").on('mouseenter', showBox);
    $("input[name=rating]").on('mouseleave', hideBox);

    function showBox(e) {
        var x = e.pageX - 80;
        var y = e.pageY + 20;
        $('#tooltip_block').fadeIn();
        $('#tooltip_block').offset({ left: x, top: y });
    }

    function hideBox() {
        $('#tooltip_block').fadeOut();
    }
});

    .rating_widgets {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.rating {
    border: none;
    float: left;
}

    .rating > input {
        display: none;
    }

    .rating > label:before {
        margin: 5px;
        font-size: 24px;
        font-family: FontAwesome;
        display: inline-block;
        content: "\f005";
    }

    .rating > .half:before {
        content: "\f089";
        position: absolute;
    }

    .rating > label {
        color: #ddd;
        float: right;
    }

    .rating > input:checked ~ label,
    .rating:not(:checked),
    .rating:not(:checked) {
        color: #FFD700;
    }

    .rating > input:checked,
    .rating > input:checked,
    .rating > input:checked ~ label,
    .rating > input:checked ~ label {
        color: #FFED85;
    }

#tooltip_block {
    display: none;
    position: absolute;
    z-index: 1;
    color: #ffffff;
    background-color: #000;
}

<div class="rating_widgets">
    <fieldset class="rating">
        <input type="radio" id="star5" name="rating" />
        <label class="full" for="star5"></label>
        <input type="radio" id="star4half" name="rating" value="4 and a half" />
        <label class="half" for="star4half"></label>
        <input type="radio" id="star4" name="rating" value="4" />
        <label class="full" for="star4"></label>
        <input type="radio" id="star3half" name="rating" value="3 and a half" />
        <label class="half" for="star3half"></label>
        <input type="radio" id="star3" name="rating" value="3" />
        <label class="full" for="star3"></label>
        <input type="radio" id="star2half" name="rating" value="2 and a half" />
        <label class="half" for="star2half"></label>
        <input type="radio" id="star2" name="rating" value="2" />
        <label class="full" for="star2"></label>
        <input type="radio" id="star1half" name="rating" value="1 and a half" />
        <label class="half" for="star1half"></label>
        <input type="radio" id="star1" name="rating" value="1" />
        <label class="full" for="star1"></label>
        <input type="radio" id="starhalf" name="rating" value="half" />
        <label class="half" for="starhalf"></label>
    </fieldset>
</div>
<div id="tooltip_block">
    <div class="top_bar">4.2 stars out of 5 stars</div>
</div>

Answer 1

您的问题在于输入字段不是您实际悬停的字段，而是标签。

这应该可以工作（请注意，我还用 show()/hide() 替换了 fadeIn()/fadeOut()，因为鼠标移动会使淡入淡出动画排队，如果您在星星周围移动鼠标，它会闪烁） .

$(document).ready(function(){ 
  $("label").hover(showBox, hideBox);

  function showBox(e) {
    var x = e.pageX - 80;
    var y = e.pageY + 20;

		$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
    $('#tooltip_block').show();
    $('#tooltip_block').offset({ left: x, top: y });
  }
   
  function hideBox(){
    	$('#tooltip_block').hide();
  }
});

.rating_widgets {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.rating { 
  border: none;
  float: left;
}
.rating > input { display: none; } 
.rating > label:before { 
  font-size: 24px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > .half:before { 
  content: "\f089";
  position: absolute;
  margin-left: 10px;
}
.rating > label { 
  color: #ddd; 
 float: right; 
 margin-left: 10px;
}
.rating > input:checked ~ label, 
.rating:not(:checked),
.rating:not(:checked){ color: #FFD700;  }

.rating > input:checked, 
.rating > input:checked,
.rating > input:checked ~ label, 
.rating > input:checked ~ label { 
	color: #FFED85;
} 
#tooltip_block {
	display: none;
	position: absolute;
	z-index: 1;
	color: #ffffff;
	background-color: #000;
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating_widgets">
	<fieldset class="rating">
		<input type="radio" id="star5" name="rating" value="5"/>
		<label class = "full" for="star5"></label>
		<input type="radio" id="star4half" name="rating" value="4.5" />
		<label class="half" for="star4half"></label>
		<input type="radio" id="star4" name="rating" value="4" />
		<label class = "full" for="star4"></label>
		<input type="radio" id="star3half" name="rating" value="3.5" />
		<label class="half" for="star3half"></label>
		<input type="radio" id="star3" name="rating" value="3" />
		<label class = "full" for="star3"></label>
		<input type="radio" id="star2half" name="rating" value="2.5" />
		<label class="half" for="star2half"></label>
		<input type="radio" id="star2" name="rating" value="2" />
		<label class = "full" for="star2"></label>
		<input type="radio" id="star1half" name="rating" value="1.5" />
		<label class="half" for="star1half"></label>
		<input type="radio" id="star1" name="rating" value="1" />
		<label class = "full" for="star1"></label>
		<input type="radio" id="starhalf" name="rating" value="0.5" />
		<label class="half" for="starhalf"></label>
	</fieldset>
</div>
<div id="tooltip_block">
	<div class="top_bar"><span class="rating_value"></span> stars out of 5 stars</div>
</div>

编辑

这是将值插入悬停框的代码

$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());

如果您想摆脱它们，请删除该行 javascript（您可能应该删除

<span class="rating_value"></span>

从悬停 div 以及没有那一点 js 没有任何用途）。

编辑#2

就悬停出现在星星之间 - 我更新了你的 CSS。问题是你在设置

.rating > label:before {
    margin: 5px;
    ...
}

这有效地使显示您的星星的元素彼此紧挨着。你可以使用

.rating > label { 
    ...
    margin-left: 10px;
}

.rating > .half:before { 
    ...
    margin-left: 10px;
}

而是在标签元素周围创建边距