鼠標移上去變大、改變背景顏色等

阿新 • • 發佈：2018-05-20

col gree meta AR ner func one nsh 恢復

<!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>

鼠標移上去變大、改變背景顏色等

col gree meta AR ner func one nsh 恢復 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l

jQuery PC端圖片預覽，鼠標移上去查看大圖

utf-8 charset order inline logs 鼠標 w3c auto end <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

鼠標移上去顯示內容

spa -c class idt logs cnblogs css pos block <style type="text/css"> a { position: relative; } a div { display: none; c

超出div寬度範圍的文字進行省略號省略，在鼠標移上去以後顯示完整的內容

ellipsis 高度 font 麻煩 http 進行代碼改變禁止一、前言　　當我們在固定的範圍內顯示內容時，我們是希望能夠完整顯示的，然而往往事與願違，文本會超出我們給定的範圍，這時候怎麽辦呢？二、超出範圍，對文本進行省略號隱藏　　先上圖　　代碼很簡單

鼠標移動到圖片上圖片逐漸變大、變清晰（帶有過渡效果）

kit 過渡效果 html cal -m flow ansi tex type <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

給圖片添加屬性：鼠標移上後變小手並且跳轉到指定的url

rip point images win ges omd scrip oca div 給圖片添加屬性：鼠標移上後變小手並且跳轉到指定的url style="cursor: pointer;" onclick="javascript:window.location.hr

JavaScript 入門練習2：鼠標移入移出改變 div 大小

courier script element 鼠標移出定位 html 標簽 into 相對 lac 有一個位於屏幕正中央的紅色 div 正方形盒子，寬高為200×200像素，鼠標移入（懸停），正方形會變成400×400像素，鼠標移出，正方形恢復200×200像素。使用

JS添加、設置屬性以及鼠標移入移出事件

tel 小明效果 blog enter classname tex ext http 源代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

鼠標移入，改變border顏色

src css .com 簡單的鼠標 fff 代碼 col spa 效果圖如下： html代碼： <div id="frame"> <img src="picture/lover.jpg"/> </div>

JS實現鼠標移入標簽頁的完整title提示

網頁標簽 html jpg splay del log 大名 clas 實現一、條件　　1、在鼠標移入標簽上時可以捕獲到 title 對象身上觸發的事件；　　2、網頁標簽不在頁面的範圍內了，但是他還是在當前屏幕內；　　3、標簽與頁面相對於屏幕的位置都可以得到。有了

JavaScript基礎鼠標放上觸發事件onmouseover 鼠標移開觸發事件onmouseout

type 感悟 doc 博客 use div true 用途 class 鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。———————————————————————

鼠標移上與移出事件

() func on() fun cti ide popd hover none $(‘#newcl‘).hover(function(){ $("#newcl").hide(); $("#po

鼠標移入效果

pagex cti flow cross fcc abs use utf find 完整代碼 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

判斷鼠標移入元素方向

() jpg fun sel direction 元素 enter logs images $(this).bind("mouseenter mouseleave",function(e){ 　　　　var w = $(this).width(); 　　　　var

鼠標經過圖片時圖片上出現文字，鼠標移出時隱藏（通俗版） -《狗嗨默示錄》-

his -h fun con 出現 type ava style size <script type="text/javascript"> $(".news_con_col").mouseover(function(){ $(this).find(".bg-

鼠標移入移除切換圖片路徑

dst gif .com cfs logo static sta bds shu <a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"

鼠標移到某個地方時，從左向右劃出一條線的動畫

spl near webkit forward line for solid linear clas .line { border-bottom: 2px solid #E40012; width:0px; display: inline-bloc

現在的位置就是對的啊，意思就是當鼠標放上去的時候，停止滾動，鼠標離開，繼續滾動

sta 意思 out rip star script detail ref 停止 <marquee id="marquee" onmouseover="this.stop()" onmouseout="this.start()"> <a href=

div鼠標懸停，子元素上移，鼠標移出，子元素下移動畫。

auto pan mouseout 懸停 edt out script function hid HTML：　　　　　　　　　　　　　　<div class="edt_title" > <div

鼠標放上去會變化

tex pre html jquery logs style sharp 圖片 ctype <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

鼠標移上去變大、改變背景顏色等

相關推薦