JS特效:鼠标悬停显示提示

<script language="JavaScript">
function showtip2(current,e,text)
{
if (document.readyState=="complete")
{<!--如果是ie浏览器并且满足readystate标志位-->
document.all.tooltip2.innerHTML='<marquee style="border:1px solidblue">'+text+'</marquee>'
<!--循环播放链接-->
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
<!--链接的显示左边界的确定-->
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
<!--链接的显示上边界的确定-->
document.all.tooltip2.style.visibility="visible"<!--方框设置为显示-->
}
}
function hidetip2()
{
 (document.all)
document.all.tooltip2.style.visibility="hidden"<!--设置链接不显示-->
}
</script>
<div id="tooltip2"
style="background-color: white; clip: rect(0px 150px 50px 0px); height: 0px; left: 379px; position: absolute; top: 45px; visibility: visible; width: 100px; z-index: 2"><LAYER name="nstip" width="500px" bgColor="white" left="374" top="164">
</LAYER></div>
<a href="http://www.treehome.com/" onMouseOut="hidetip2()
"οnmοuseοver="showtip2(this,event,'welcome to tree home')" target="_blank">


 

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Vue的`@mouseover`和`@mouseout`事件来实现CSS图文消息的鼠标hover悬停特效。 首先,在Vue的template中,使用v-for循环渲染出图文消息列表,并为每个消息绑定一个事件: ```html <template> <div> <div v-for="message in messages" :key="message.id" @mouseover="showMessage(message.id)" @mouseout="hideMessage()"> <img :src="message.image" alt="message image"> <p>{{ message.text }}</p> </div> </div> </template> ``` 在Vue的script中,定义`showMessage`和`hideMessage`方法,分别用于显示和隐藏鼠标悬停的消息: ```javascript <script> export default { data() { return { messages: [ { id: 1, image: 'image1.jpg', text: 'Message 1' }, { id: 2, image: 'image2.jpg', text: 'Message 2' }, { id: 3, image: 'image3.jpg', text: 'Message 3' }, ], hoverMessageId: null } }, methods: { showMessage(id) { this.hoverMessageId = id }, hideMessage() { this.hoverMessageId = null } } } </script> ``` 最后,在Vue的style中,使用CSS样式来实现鼠标悬停特效。可以使用`:hover`选择器来实现鼠标悬停时的效果,并根据`hoverMessageId`来判断当前鼠标悬停的消息: ```css <style scoped> div:hover:not([data-id='{{ hoverMessageId }}']) p { opacity: 0.5; } div[data-id='{{ hoverMessageId }}'] p { font-weight: bold; } </style> ``` 这样,在鼠标悬停某个图文消息时,该消息的文本会加粗显示,其他消息的文本会变得半透明。当鼠标离开图文消息时,所有消息都会恢复原来的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值