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

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;
}

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