鼠标移上去变大、改变背景颜色等

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0px auto;
            padding: 0px;
        }

        #anniu{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
        }
        #anniu2{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
        }
        #anniu3{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;

        }
        #anniu4{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            display: none;
        }
        #continer{
            width:100%;
            height: 200px;
            background-color: red;

            }
        #anniu5{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            }
        #anniu6{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            display: none;
            float:left;
     }

    </style>
    <body>
        <div id="anniu" onclick="tanChuang()">按钮</div>
        <input type="button" name="" id="anniu2" value="按钮" onclick="tanChuang()"/>
        <button id=anniu3 onclick="tanChuang()">按钮</button>
            <br />    <br />
        <label onmouseover="xianshi()" onmouseout="yincang()"><input type="checkbox" />鼠标经过出现按钮</label>
        <button id="anniu4">按钮</button>
        <br />    <br />
        <div id="continer" onmouseover="yiRu()" onmouseout="yichu()">鼠标经过这个div变高变色,移出再恢复</div>
        <div id="anniu3" onclick="change1()">颜色1 </div>
        <br />    <br />
        <div id="anniu3" onclick="change2()">颜色2 </div>
        <br />    <br />
        <br />    <br />
        <button id="anniu5" onclick="showhide()">按钮1</button>
        <button id="anniu6" onclick="showhide()">按钮2</button>
    </body>
</html>
<script type="text/javascript">
    function tanChuang() {
        alert("弹出窗口");
    }
    function xianshi(){
        var div1 =document.getElementById("anniu4");
        div1.style.display="block";
    }
    function yincang(){
        var div1 =document.getElementById("anniu4");
        div1.style.display="none";
    }
    function yiRu(){
        var div2=document.getElementById("continer");
        div2.style.width = "80%";
        div2.style.height = "400px";
        div2.style.backgroundColor ="green"
    }
    function yichu(){
        var div2=document.getElementById("continer");
        div2.style.width = "100%";
        div2.style.height = "200px";
        div2.style.backgroundColor ="red "
    }
    function change1(){
        var bodycolor=document.body;
        bodycolor.style.backgroundColor="red";
    }
    function change2(){
        var bodycolor=document.body;
        bodycolor.style.backgroundColor="green";
    }
    function showhide(){
        var showhide = document .getElementById("anniu6").style.display;
        if(showhide==‘none‘){
            document .getElementById("anniu6").style.display="block";
        }else{
            document .getElementById("anniu6").style.display="none";
        }
    }

    </script>

原文地址:https://www.cnblogs.com/zhengleilei/p/9062268.html

时间: 2024-10-14 10:23:22

鼠标移上去变大、改变背景颜色等的相关文章

CSS实例:鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

改变背景颜色

//改变背景颜色 protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e) { //如果是绑定数据行 if (e.Row.RowType == DataControlRowType.DataRow) { //鼠标经过时,行背景色变 e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#ffa501'&qu

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

jquery改变背景颜色

jquery改变背景颜色<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").toggle(function(){    $

jquery动态改变背景颜色插件

GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> <style> div { background-color: #bada55; width: 100px; border: 1px solid green; } </style> <script src="http://code.jquery.com/jquery-1

锐浪 报表, 交叉报表中 对交叉字段,做条件改变背景颜色 .

var fieldCount = Report.RunningDetailGrid.ColumnContent.ContentCells.Count; // 总字段列数 var lockFieldCount = Report.DetailGrid.CrossTab.ListCols; // 锁定字段列数 var crossFieldCount = fieldCount - lockFieldCount; for(var colIndex = 1; colIndex <=crossFieldCou

Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果

<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若干个TextView其中之一时候,要产生一定的交互效果(背景颜色改变等).这种实现的方式有不少可选方案,现在通过背景的selector.xml实现. 效果如下: A.初始状态: B.当用户单击了TextView 2,但此时用户的手指一直在按下并未松开的状态,(注意交互设计效果!TextView 2的背景颜色变

iOS 创建多个button实现点击改变背景颜色

工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击改变背景色.其他的没被点的button的背景恢复默认.之前也写过,因为button太多,需要各种判断.感觉之前方法的方法比较麻烦. . 第一种方法 在创建button的时候,把所有的button存储到可变数组里,在button点击事件里面,拿到之前的可变数组,对里面的每一个button遍历,遍历的时

黑马day18 鼠标事件&amp;图片变大

有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大,然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这种效果: 这是图片目录: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml