1.2鼠标移入移出改变背景色和其他大小样式

功能：鼠标移入div,背景色变为绿色，宽变小，长变大，移出恢复原状

事件：onmouseover,onmouseout

属性： background,width,height

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

/css

#div1{
width:100px;
height:200px;
background: red;
}

//js

var oDiv=document.getElementById("div1")
oDiv.οnmοuseοver=function(){
oDiv.style.background = 'green';
oDiv.style.width = '200px';
oDiv.style.height = '100px';
};
oDiv.οnmοuseοut=function(){
oDiv.style.background = 'red';
oDiv.style.width = '100px';
oDiv.style.height = '200px';
};

更多专业前端知识，请上【猿2048】www.mk2048.com

1.2鼠标移入移出改变背景色和其他大小样式相关推荐

鼠标移入移出改变元素的背景颜色
鼠标移入移出改变元素的背景颜色首先:给div标签设置一个基本的样式, 让这个div元素垂直居中. 效果展示: 然后在script标签里面获取元素div, 将获取到的div赋值给div,然后输出到控 ...
javascript 鼠标移入移出改变图片透明度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>鼠标移 ...
php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式
这是一个简单的例子,先看demo: 源码如下: #box {width:140px; height:140px; margin: auto; background-color:black; color ...
VUE鼠标移入移出改变元素样式
这种功能实际开发中用的特别多,但是写起来的话有点点麻烦,演示两种方案,第一种就是常规的class和style绑定,第二种是使用event来搞定,个人觉得event比较比较简单,不用设置那么多的中间变量 ...
js实现鼠标移入移出改变图片路径问题
刚开始一直在用js尝试mouseover和mouseout这俩属性,结果根本不起作用.换成mouseenter和mouseleave,成功. 实现效果: 移入前移入后代码: <div cla ...
html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
摘要腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果,壹学车,小猿口算,网易uu,万步有约等软件知识,以及山西个税,自动伴奏软件,成都农商银行app,儿歌千千,抖音群控系统,qq领赞,201 ...
php鼠标已入移除,angularjs鼠标移入移出实现显示隐藏
操作主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量截图如下: CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部 ...
Axure-蒙版遮罩，鼠标移入移出点击效果设置，登录注册页面
第二章主要讲解蒙版遮罩,鼠标移入移出点击效果设置及登录注册页面蒙版遮罩就是用和页面大小的并且设置为半透明灰色的矩形盖住原有的页面,与某一元件相关联系(在"交互"中添加" ...
判断鼠标移入移出方向（二）-----获取鼠标移入方向
第二部分内容,这里也列出思路,方便承接第一部分. 思路 1:给li绑定鼠标移入移出事件 2:获取鼠标移入的位置(有用),例:(x,y) 3:获取图片距离浏览器的位置(有用),top,left,heig ...

1.2鼠标移入移出改变背景色和其他大小样式

1.2鼠标移入移出改变背景色和其他大小样式相关推荐

最新文章

热门文章