鼠标点击换背景图和样式-3种

最新推荐文章于 2022-09-24 20:39:15 发布
最新推荐文章于 2022-09-24 20:39:15 发布
阅读量440 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41813243/article/details/110855284
版权
这篇博客展示了如何利用JavaScript和Vue实现三种鼠标交互效果：1) 鼠标移入移出改变元素背景和样式；2) 鼠标点击切换元素样式和背景图片；3) 鼠标点击切换图标和背景样式。通过示例代码详细解释了实现这些效果的方法。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>鼠标离开进入</title>

    <script src="js/jquery-1.11.1.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <!-- 1鼠标移进  移出 -->

    <!-- <style>

        ul li {

            list-style: none;

        }

 

        .tscx-bottom {

            height: 270px;

            /* margin-top: 7px; */

        }

 

        .tscx-bottom ul {

            height: 100%;

            display: flex;

        }

 

        .tscx-bottom ul li {

            flex: 1;

            position: relative;

        }

 

        .tscx-bottom li img {

            position: absolute;

            top: 24%;

            left: 50%;

            transform: translateX(-50%);

        }

 

        /* .tscx-bottom li span {

            position: absolute;

            bottom: 68px;

            left: 50%;

            transform: translateX(-50%);

            font-size: 18px;

            text-align: center;

            width: 100%;

            color: black;

        }

 

        .tscx-bottom li span:hover {

            cursor: pointer;

            text-decoration: underline;

        } */

 

        .lilist2 {

            background-color: #fff;

            cursor: pointer;

            font-size: 18px;

            font-weight: bold;

        }

 

        .lilist2:hover {

            background-color: #507bc9;

            color: #fff;

        }

 

        .lilist {

            background-color: #fff;

            margin-left: 12px;

            cursor: pointer;

            font-size: 19px;

            font-weight: bold;

        }

最低0.47元/天 解锁文章
爱学习的小饼干
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
10-18
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
C1小笔记【任务训练篇三】
CSDN_YJX的博客
04-24 769
伪元素选择器 二、任务背景 伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。 三、任务内容 一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用 为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符 伪元素 描述 示例 ::after 用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素 p::after {
ul-li 点击改变背景色
韩小转的博客
04-05 1万+
CSS ul li{height: 25px;line-height: 25px;cursor: pointer;} .blue{background: rgb(40,169,227);color: white;} JS $(document).ready(function(){ $("ul li").click(function(){ $(th
jQuery bgStretcher 背景图片切换效果插件
dijiao7951的博客
10-03 679
偶尔发现了这么一个插件，很不错的一个功能！ jQuerybgStretcher (Background Stretcher)，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。 插件特...
如何给li前的圆点添加背景颜色
落日夕霞的博客
07-06 8064
如何给li前的圆点添加背景颜色
使用jQuery更改图片来源
asdfgh0077的博客
01-27 620
我有一些图像及其翻转图像。 我想使用jQuery在onmousemove / onmouseout事件发生时显示/隐藏过渡图像。 我所有的图像名称都遵循相同的模式，如下所示： 原始图
鼠标经过替换背景和文字
01-08
"鼠标经过替换背景和文字"是一种常见的交互设计技术，主要用于按钮、链接或者图像等元素，当用户将鼠标悬停在这些元素上时，会动态地改变其背景图片和文字内容，以增加视觉吸引力和交互性。以下我们将详细探讨这个...
7种CSS3鼠标hover图片效果
06-24
本文将深入探讨如何利用CSS3来实现7种不同的鼠标hover图片效果，这些效果可以通过集成的`magic.css`库轻松实现。 1. **平滑变换**： CSS3中的`transition`属性允许我们平滑地改变元素的样式，当鼠标悬停在图片上时...
js实现背景图片感应鼠标变化的方法
10-24
本文将详细讲解如何使用JavaScript实现背景图片感应鼠标变化的方法，并结合实例分析JavaScript处理鼠标事件和CSS样式图片操作的技术。 首先，我们要了解JavaScript中的鼠标事件。常见的鼠标事件包括`mouseover`...
完全用CSS实现鼠标移动到图片并更换图片
09-05
CSS（层叠样式表）是一种强大的样式语言，可以用于控制网页元素的布局和外观，包括动态效果。 首先，让我们分析一下给出的代码片段。这段HTML结构包含一个`<div>`元素，类名为`.nav`，内部有一个无序列表`<ul>`，...
鼠标经过换背景色网页特效
11-24
网页特效是提升用户体验的重要手段之一，其中“鼠标经过换背景色”是一种常见的交互设计，它可以使用户在浏览网页时有更直观的反馈，增加互动感。这个特效主要应用于导航菜单、按钮、产品列表等元素，当鼠标指针悬浮...
html鼠标点击后变换样式,css鼠标样式（css鼠标点击切换样式）
weixin_39717825的博客
06-04 4194
css鼠标样式新浪博客代码个性化CSS鼠标样式网址完整问题：新浪博客代码个性化CSS鼠标样式网址好评回答：进入控制面版→维护首页内容→自定义空白面版→输入方框内代码，有的人给出的代码还要打字,我的不需要,其实在代码里加入一个就可以了,因为这个东西是HTML代码里的空格,相当于有内容了.---- ...
【Css】div或按钮鼠标经过或鼠标点击后效果样式（图文+示例）
热门推荐
【敦厚的曹操】的专栏
09-24 2万+
【Css】div或按钮鼠标经过或鼠标点击后效果样式（图文+示例）
点击图片改变背景
Q_ooo_的博客
06-28 95
Document window.onl
鼠标点击更换背景图片
a63438840的博客
07-28 2317
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=...
利用js实现鼠标切换控件背景图片
feven1994的博客
09-20 4494
js控制鼠标经过控件改变背景图片和点击控件改变背景图片。
类型为image的input标签，鼠标点击切换按钮背景图片
sum__mer的专栏
08-11 3147
input标签生成的按钮，使用图片作为按钮背景，鼠标点下时切换背景图片，鼠标松开时，回到默认背景图片。使用的背景图片如下： 效果图： $(function(){ //"打开"按钮控制 var openbutton = $("#openvideo"); openbutton.mousedown(function(){ openbutton.
2021-02-27
LHJ0_0的博客
02-27 506
按钮的过渡效果 首先，我们先看一下初始样式： 然后最终变化完的效果就是这个样子： 现在我们来看一下HTML的布局： 就是一个a标签包裹着一个span标签，span标签里面放的就是按钮中间显示的字母，这里之所以要放一个a标签就是因为这是一个“按钮”，按钮肯定会有点击，所以我们就要用到a标签，然它在点击时有一个页面跳转 现在讲一下这次小案例的知识点： transform: scaleY(0.0) rotateX(0deg); scaleY（）元素仅垂直方向缩 rotateX（）用于设置旋转的角度，如果为正
鼠标点击后改变样式
thy47226918808的专栏
04-27 5479
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档.Out {background-image:url(navgations0.jpg);width:40px;height:32px;cursor:hand;}.ove{background-image:url(na
vue3怎么鼠标经过换背景颜色
最新发布
08-19
你可以使用 Vue 3 来实现鼠标经过时换背景颜色的效果。以下是一个简单的示例： 首先，在你的组件模板中，绑定一个鼠标进入和离开事件，用来触发颜色的变化。例如： ```html <template> <div class="box" @mouseenter="changeBackgroundColor(true)" @mouseleave="changeBackgroundColor(false)" > <!-- 内容 --> </div> </template> ``` 接下来，在组件的 `data` 中定义一个变量来保存背景颜色的状态，并创建一个方法来改变背景颜色。例如： ```javascript <script> export default { data() { return { isHovered: false, }; }, methods: { changeBackgroundColor(isHovered) { this.isHovered = isHovered; }, }, }; </script> ``` 最后，在组件的样式中使用动态绑定类名的方式来控制背景颜色。例如： ```html <style scoped> .box { width: 200px; height: 200px; background-color: #ccc; } .hovered { background-color: #ff0000; } </style> ``` ```html <template> <div class="box" :class="{ hovered: isHovered }" @mouseenter="changeBackgroundColor(true)" @mouseleave="changeBackgroundColor(false)" > <!-- 内容 --> </div> </template> ``` 这样，当鼠标经过时，背景颜色会变成红色（#ff0000），离开时则恢复为默认背景色（#ccc）。 希望能对你有所帮助！如有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值