1. 程式人生 > >如何實現滑鼠移動按鈕上,按鈕變顏色的效果

如何實現滑鼠移動按鈕上,按鈕變顏色的效果

可以通過js來改變滑鼠放在按鈕上的樣式:

這是按鈕的預設狀態:

<button id='btn' class=" btn btn-block btn-default">提交</button>

js中可以這樣寫:

<script>
        window.onload = function() {
            var btn = document.getElementById('btn');
            btn.onmouseover = function() {
                $("#btn"
).addClass('btn-info'); }; btn.onmouseout = function() { $("#btn").removeClass('btn-info') }; };
</script>

相關推薦

如何實現滑鼠移動按鈕按鈕顏色效果

可以通過js來改變滑鼠放在按鈕上的樣式: 這是按鈕的預設狀態: <button id='btn' class=" btn btn-block btn-default">提交<

CSS3實現滑鼠移動到圖片圖片大(緩慢有過渡效果放大的過程是有動畫過渡的這個過渡的時間可以自定義)

CSS3的transform:scale()可以實現按比例放大或者縮小功能。 CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對

JTree 如何實現高亮節點如何實現排選如何實現滑鼠移動高亮?

先上圖,看看是不是你們想要的類似效果: 滑鼠移動到樹節點所在行的任意位置,實現高亮。 滑鼠點選到樹節點所在行的任意位置,實現高亮並選中該節點。 網上找了好久都沒找到這樣的實現方法,可能是swing 現在用的人太少了。 在這裡希望能為想要用swing JTree的朋友提供一點參考

js實現滑鼠移動到div背景顏色變換移開還原

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js重溫</title> </head> <div id="sss"

html+css實現自定義圖片按鈕

普通的input[type=‘file’]的效果很樸素 可以自定義一個file選擇檔案的按鈕: 思路為: 用定位將自定義的按鈕遮住原來的選擇檔案按鈕, 再讓點選自定義按鈕時觸發原來的選擇檔案按鈕的事件即可 (對此,label可實現) eg: html: css樣式: 結果圖:

實現美化的圖片按鈕

圖片上傳按鈕<div class="form-group"> <label>商家banner</la

【JavaScript】使用js實現傳送郵箱驗證碼按鈕倒計時

使用JQuery做一個點選按鈕倒計時的效果; 先給大家看一下最終的效果, 圖一:按鈕可點選, 圖二:按鈕不可點選,並更改button的html() 按鈕Html程式碼如下: <button type="button" class="ui_btn ui_

JS實現滑鼠移動後面跟隨著特效

要實現的效果是,滑鼠在移動的過程中,滑鼠尾巴後面跟著一些小特效,: 這是滑鼠移動到時候,後面跟隨著小特效 其實原理就是遍歷出所有的div小方塊 然後每一個小方塊都跟隨自己前面的小方塊, 第一個小方塊就跟隨滑鼠,當滑鼠移動的時候,就會出現這樣的效果 css程式碼:給小方塊設定樣式

android定義圓形按鈕Shape選中改變顏色

功能說明:android定義圓形按鈕,使用Shape與selector選擇器,按鈕選擇背景色改變1.activty的佈局     <Button         android:id="@+id/login" &nbs

js 實現移動端開發解決不同手機畫素大小的相容問題

Js 實現在移動開發網頁時,根據手機畫素不同,自動改變相對,字型的大小。 例項程式碼中以750畫素為參考,如果在350畫素手機上顯示該內容,相對字型大小為1px=0.01rem (funct

javascript--滑鼠拖拽視窗案例(滑鼠按下滑鼠移動過程中盒子跟著一起移動滑鼠鬆開盒子停止移動

介面如圖所示: 要求:在“資訊註冊”欄,按下滑鼠,然後滑鼠在頁面移動,在滑鼠移動過程中,該視窗跟著滑鼠移動,當滑鼠鬆開的時候,視窗停止移動。點選“關閉”,該視窗隱藏。 實現思路: 1.頁面結構分析:一個大盒子d-box來確定位置,裡面放一個小盒子drop(存放“註冊資訊(可以拖拽”文字和span標籤

jq實現滑鼠放置名字顯示詳細內容的氣泡效果

  實現效果如上圖,當滑鼠放置到名字上時,則顯示出內容詳情。 實現具體過程如下: 1、需要加這句js <!--實現滑鼠放置名字上顯示氣泡說明的js--> <script>         $(functi

使用SwingWorker 點選按鈕按鈕不讓點選在處理完之後顯示為可點

public void actionPerformed(ActionEvent e) { btn_convert.setEnabled(false); new ConvtSwingWorker().execute(); } private class Con

ligerui實現滑鼠滑過行顯示單元格內容

實現滑鼠滑過行時,顯示操作表格中的內容,移出時隱藏。 {display : '操作',name : 'operate_list_grid',width:'200', render:function(rowdata, rowindex, value){ v

css3實現滑鼠懸浮文字上方文字底部的下劃線向兩邊縮放!

採用css3加偽類的方式顯示當滑鼠懸浮在文字上方時,文字底部出現向兩邊展開的效果! css部分 .text-underline{ display: inline;

仿淘寶實現滑鼠移入圖片圖片放大功能

<!doctype html><html><head><meta charset="utf-8"><title>無標題文件</title><style>  *{margin: 0;paddin

如何實現滑鼠放在圖片出現文字說明效果

最近在瀏覽網頁時,看到一些圖片,滑鼠一放上去呢,就會有說明文字“浮”上來,移開又“沉”下去,感覺好炫!自己就在網上找實現程式碼啊,看看事件是怎麼實現的!然後就找到了如下的程式碼: <!DOCTYPE html> <html> <head>

JQuery實現滑鼠滑動多次只觸發一次響應事件

正常在設定滑鼠滾輪事件的時候,一次滾動對應一次響應事件。但是按照使用者習慣,使用者一次滑動滑鼠滾輪的動作中,可能實際上滑鼠滾輪滾動了多次(通俗的講,就是使用者不會一下一下的滑動滾輪)。這樣實際上觸發了多次滾輪響應事件,無法達到理想中,使用者滑動一次滾輪,只產生一個動作的效果,

Canvas實現滑鼠在網頁塗畫

使用Canvas實現,滑鼠在網頁上進行塗抹繪畫。 效果如下: 主要是使用了canvas繪圖,圖畫的軌跡是利用一張黑色圓點圖片重複繪製疊加而成,具備點選瀏覽器前進或後退按鈕的實現返回前一筆畫或後一

CSS實現滑鼠放圖片顯示白色邊框+文字描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html