溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關javascript如何實現(xiàn)鼠標懸停變色效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
javascript實現(xiàn)鼠標懸停變色的方法：1、元素綁定onmouseover事件，并設置事件處理函數(shù)；2、在事件處理函數(shù)中，使用“元素對象.style.顏色屬性名="顏色值";”語句設置當觸發(fā)懸停事件時，元素顏色改變效果。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
思想：對于上一級元素、父元素實現(xiàn)下級元素、子元素變色。僅需 :hover 及 css 選擇器便可完成。下級元素對上級操作，現(xiàn)使用 JavaScript 中 onmouseover、onmouseout 事件
onmouseover 事件會在鼠標指針移動到指定的元素上時發(fā)生。
onmouseout 事件會在鼠標指針移出指定的對象時發(fā)生。
一、HTML 代碼
<body> <div id="A"> <div id="B"> 鼠標移動到 A div 時，我要變色 </div> </div> <hr /> <div id="AB"> <div id="a"> 一號 div </div> <div id="b"> 二號 div </div> </div> </body>
二、JavaScript 代碼
??注：建議寫在 body 的結束標簽前
<script type="text/javascript">
document.getElementById("b").onmouseover=function(){
document.getElementById("a").style.backgroundColor="green";
}
document.getElementById("b").onmouseout=function(){
document.getElementById("a").style.backgroundColor="red";
}
</script>三、CSS 代碼
<style type="text/css">
#A{
height: 400px;
width: 400px;
background-color: red;
}
#B{
height: 300px;
width: 300px;
background-color: green;
display: none;
}
#A:hover #B{
display: block;
}
#a{
height: 300px;
width: 300px;
background-color: red;
}
#b{
margin-left: 50px;
height: 300px;
width: 300px;
background-color: red;
}
#a:hover+#b {
background-color: green;
}
</style>四、效果圖
javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡服務器，如Node.js。
以上就是javascript如何實現(xiàn)鼠標懸停變色效果，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
