用HTML的jQuery实现当鼠标移到图片上时,显示边框,鼠标移出图片时,边框消失
时间: 2023-12-09 15:04:29 浏览: 39
可以使用jQuery的`.hover()`方法来实现该效果,代码如下:
```html
<!-- HTML代码 -->
<img src="example.jpg" class="image">
<!-- jQuery代码 -->
<script>
$(document).ready(function(){
$(".image").hover(
function(){
$(this).css("border", "1px solid black"); // 鼠标移到图片上时,添加边框
},
function(){
$(this).css("border", "none"); // 鼠标移出图片时,移除边框
}
);
});
</script>
```
需要先引入jQuery库,然后在`<script>`标签中编写jQuery代码。当鼠标移入`.image`元素时,执行第一个函数,添加黑色的1像素宽度的实线边框;当鼠标移出`.image`元素时,执行第二个函数,移除边框。
相关问题
jquery实现 当鼠标移到input的时候,input框变大,当移出时,恢复
可以使用jQuery的事件绑定和CSS方法来实现这个效果。具体实现步骤如下:
1. 使用jQuery的mouseenter事件和CSS方法,当鼠标移到input时,设置input的宽度和高度属性为变大的效果。
2. 使用jQuery的mouseleave事件和CSS方法,当鼠标移出input时,将input的宽度和高度属性设置为原来的值,即恢复原来的大小。
示例代码如下:
```html
<div class="input-container">
<input type="text">
</div>
```
```css
.input-container input {
width: 100px;
height: 30px;
transition: all 0.3s ease;
}
.input-container:hover input {
width: 120px;
height: 40px;
}
```
```javascript
$(function() {
// 鼠标移到input时设置变大的效果
$(".input-container input").mouseenter(function() {
$(this).css({
"width": "120px",
"height": "40px"
});
});
// 鼠标移出input时恢复原来的大小
$(".input-container input").mouseleave(function() {
$(this).css({
"width": "100px",
"height": "30px"
});
});
});
```
通过以上代码,当鼠标移到input时,input框变大,移出时恢复原来的大小。
用jquery代码实现鼠标移上去时边框变色
可以使用以下 jQuery 代码来实现:$('selector').hover(function(){ $(this).css('border', '1px solid #000'); }, function(){ $(this).css('border', '1px solid #FFF'); });
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)