Question

当用户将鼠标移动到选择菜单中的每个选项时，我试图显示带有图像的工具提示。

这是我的选择项目：

<label for="">Vehicle</label>
<select name="car" id="car" class="ui fluid dropdown">
        <option value="Chevrolet">Chevrolet Impala</option>
        <option value="Mustang">Mustang GT500</option>
        <option value="Hemi Cuda">Hemi Cuda</option>
                    <option value="Tundra">Toyota TUNDRA</option>
 </select>

任何人都可以帮忙吗？

Answer 1

$('select option').each(function() {
  $('.fake-select ul').append("<li data-val='" + this.value + "' data-img='" + this.dataset.img + "'>" + this.innerHTML + "</li>");
});
$('.fake-select').on('click', function() {
  $(this).addClass('active');
})
$('.fake-select ul').on('mouseenter', 'li', function() {
  $('.img img').attr('src', this.dataset.img);
})
$('.fake-select ul').on('click', 'li', function() {
event.stopPropagation()
  $('.fake-select').removeClass('active');
  $('.selected').html(this.dataset.val);
})

select {
  display: none;
}

ul {
  list-style-type: none;
}

.fake-select ul {
  display: none;
}

.fake-select.active ul {
  display: inline-block;
}

.selected:hover {
  cursor: pointer;
}

.fake-select li:hover {
  background-color: blue;
  color: #fff;
  cursor: pointer;
}

.fake-select:hover .img {
  outline: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">Vehicle</label>
<select name="car" id="car" class="ui fluid dropdown">
        <option value="Chevrolet" data-img="path">Chevrolet Impala</option>
        <option value="Mustang" data-img="path">Mustang GT500</option>
        <option value="Hemi Cuda" data-img="path">Hemi Cuda</option>
        <option value="Tundra" data-img="path">Toyota TUNDRA</option>
 </select>
<div class="fake-select">
  <div class="selected">place holder</div>
  <ul></ul>
  <div class="img"><img src="" /></div>
</div>

这会更好地回答你的问题吗？

显示带有选择项目图像的工具提示

1 个答案: