鼠标移到图片,图片加边框

什么问题请到评论中发表<br>

<!-- http://www.mb5u.com/jscode -->

<!-- bbs http://www.mb5u.com/bbs-->



<!-- 把下列代码加入到head区内 -->

<style>



.highlightit img{

border: 1px solid #ccc;

}



.highlightit:hover img{

border: 1px solid navy;

}



.highlightit:hover{

color: red; /* Dummy definition to overcome IE bug */

}



</style>





<!-- 把下列代码加入到body区内 -->

<a href="http://www.mb5u.com/" class="highlightit"><img border="0" src="/img/200406302.jpg"></a>

<a href="http://www.google.com/" class="highlightit"><img border="0" src="/img/200406301.jpg"></a>

 

在Vue.js中,你可以通过CSS和JavaScript结合来实现鼠标悬停时图片添加边框效果。下面是一个基本的示例: 首先,在HTML部分,创建一个`<img>`标签,并给它一个唯一的引用ID,例如`data-image`: ```html <img :id="imageId" src="yourImageSrc" @mouseover="showBorder" @mouseout="hideBorder" /> ``` 这里`@mouseover` 和 `@mouseout` 是 Vue.js 的绑定事件,分别表示当鼠标移入和移出像时触发。 然后,在Vue实例的`data`选项里定义变量`imageId`和一些状态(如是否显示边框的布尔值`borderIsShowing`): ```javascript export default { data() { return { imageId: 'yourImageId', borderIsShowing: false, }; }, // ... } ``` 接着,在`methods`部分编写两个方法,`showBorder`和`hideBorder`,用来控制边框的显示和隐藏: ```javascript methods: { showBorder() { this.borderIsShowing = true; document.getElementById(this.imageId).classList.add('hover-border'); }, hideBorder() { this.borderIsShowing = false; document.getElementById(this.imageId).classList.remove('hover-border'); }, }, ``` 最后,在CSS中定义`.hover-border`类,添加你想要的边框样式: ```css .hover-border { transition: all 0.3s; /* 可选,增过渡效果 */ border: 1px solid #ccc; /* 示例边框样式,可根据需求调整 */ outline: none; /* 如果有默认轮廓,可以去除 */ } ``` 当你将鼠标移到图片上时,图片添加边框;移开则边框消失,因为`hideBorder`会在鼠标离开时自动清除该类。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值