要实现选中元素突出显示的效果，可以使用jQuery中的hover方法结合CSS的hover选择器来实现，具体操作步骤如下：
一、引入jQuery库
在HTML文件的
标签中引入jQuery库，如下所示：<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
二、编写CSS样式
在CSS文件中编写要操作的样式，如下所示：
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
}
.box:hover {
border: 2px solid #f00;
}
以上代码表示，当鼠标悬停在class为box的元素上时，增加一个2px宽的红色边框。
三、编写jQuery代码
在jQuery文件中编写要操作的代码，如下所示：
$(document).ready(function(){
$(".box").hover(function(){
$(this).toggleClass("selected");
});
});
以上代码表示，当鼠标在class为box的元素上移入或移出时，使用toggleClass方法为该元素添加或移除class为selected的样式。
示例一
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
}
.box:hover {
border: 2px solid #f00;
}
.selected {
border: 2px solid #f00;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).toggleClass("selected");
});
});
</script>
以上示例展示了一个页面上有三个元素class为box，当鼠标悬停在这些元素上时，会增加一个2px红色边框，同时，当将鼠标移入或出时，也会修改该元素的边框颜色。
示例二
<div class="box"></div>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
}
.box:hover {
border: 2px solid #f00;
}
.selected {
border: 2px solid #f00;
background-color: #f8f8f8;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).toggleClass("selected");
});
});
</script>
以上示例展示了一个只有一个元素class为box的页面，当鼠标悬停在该元素上时，会增加一个2px红色边框以及一个浅灰色背景色。同时，当将鼠标移入或出时，也会修改该元素的边框颜色和背景色。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法 - Python技术站
微信扫一扫 
支付宝扫一扫 