我有两个 Bootstrap 选择按钮，上面写着红色和橙色，还有两个红色和橙色的方 block 。
当悬停其中一个按钮时，相应的方 block 会发光并带有文本阴影。但是，当单击一个按钮并打开菜单并且悬停其中的元素时，发光就会停止。我希望整个菜单都能触发发光。
有人能告诉我怎么做吗？我考虑过增加按钮的底部填充，使其在单击时增长到菜单的大小，然后禁用菜单的指针事件，这解决了发光问题，但这阻止了我实际单击元素。
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$('select').each(function(index, item) {
$(this).parent().find('.filter-option').addClass("big");
$(this).parent().find('.filter-option').addClass($(this).val());
}).on('change', function() {
$(this).parent().find('.filter-option').removeClass(function(index, className) {
return (className.match(/_\d*/g) || []).join(' ');
});
$(this).parent().find('.filter-option').addClass($(this).val());
$('[title]').removeAttr('title');
});
$(document).ready(function() {
$('[title]').removeAttr('title');
});
$("button").mouseenter(function() {
$("#_" + $(this).data('id')).removeClass("unhovered");
$("#_" + $(this).data('id')).addClass("hovered");
});
$("button").mouseleave(function() {
$("#_" + $(this).data('id')).removeClass("hovered");
$("#_" + $(this).data('id')).addClass("unhovered");
});
});body {
font-size: 30px
}
p {
margin-top: 10px
}
.selectContainer {
width: 200px
}
.big {
font-size: 16px;
font-weight: bold !important;
text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
}
._21 {
color: red !important
}
._106 {
color: orange !important
}
._24 {
color: yellow !important
}
/*glowing effect*/
.hovered {
transition: text-shadow 0.1s linear;
text-shadow: 0 0 10px blue;
}
.unhovered {
transition: text-shadow 0.2s linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="selectContainer" style="float: left;">
<select class="form-control pickerSelectClass" id="201_26_9">
<option class="big _21" value="_21">■ Bright Red</option>
<option class="big _106" value="_106">■ Bright Orange</option>
<option class="big _24" value="_24">■ Bright Yellow</option>
</select>
<select class="form-control pickerSelectClass" id="255_163_0">
<option class="big _21" value="_21">■ Bright Red</option>
<option class="big _106" value="_106" selected>■ Bright Orange</option>
<option class="big _24" value="_24">■ Bright Yellow</option>
</select>
</div>
<br><br><br>
<p style="font-size: 40px; margin-top: 0px; float: right; margin-right: 80px;">
<span class="_21" id="_201_26_9">■</span>
<span class="_106" id="_255_163_0">■</span>
</p>
</body>最佳答案
尝试在 .btn-group 元素而不是 button 上应用悬停效果
堆栈片段
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$('select').each(function(index, item) {
$(this).parent().find('.filter-option').addClass("big");
$(this).parent().find('.filter-option').addClass($(this).val());
}).on('change', function() {
$(this).parent().find('.filter-option').removeClass(function(index, className) {
return (className.match(/_\d*/g) || []).join(' ');
});
$(this).parent().find('.filter-option').addClass($(this).val());
$('[title]').removeAttr('title');
});
$(document).ready(function() {
$('[title]').removeAttr('title');
});
$(".btn-group").hover(function() {
$("#_" + $(this).find("button").data('id')).removeClass("unhovered");
$("#_" + $(this).find("button").data('id')).addClass("hovered");
}, function() {
$("#_" + $(this).find("button").data('id')).removeClass("hovered");
$("#_" + $(this).find("button").data('id')).addClass("unhovered");
});
});body {
font-size: 30px
}
p {
margin-top: 10px
}
.selectContainer {
width: 200px
}
.big {
font-size: 16px;
font-weight: bold !important;
text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
}
._21 {
color: red !important
}
._106 {
color: orange !important
}
._24 {
color: yellow !important
}
/*glowing effect*/
.hovered {
transition: text-shadow 0.1s linear;
text-shadow: 0 0 10px blue;
}
.unhovered {
transition: text-shadow 0.2s linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="selectContainer" style="float: left;">
<select class="form-control pickerSelectClass" id="201_26_9">
<option class="big _21" value="_21">■ Bright Red</option>
<option class="big _106" value="_106">■ Bright Orange</option>
<option class="big _24" value="_24">■ Bright Yellow</option>
</select>
<select class="form-control pickerSelectClass" id="255_163_0">
<option class="big _21" value="_21">■ Bright Red</option>
<option class="big _106" value="_106" selected>■ Bright Orange</option>
<option class="big _24" value="_24">■ Bright Yellow</option>
</select>
</div>
<br><br><br>
<p style="font-size: 40px; margin-top: 0px; float: right; margin-right: 80px;">
<span class="_21" id="_201_26_9">■</span>
<span class="_106" id="_255_163_0">■</span>
</p>
</body>关于javascript - JS/CSS : Hovering for closed or open bootstrap-select，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48387118/