網頁設計滑鼠經過背景圖片_CSS+DIV實現滑鼠經過背景圖片變換

1、html 當滑鼠經過時,改變它的背景圖片

可以設置onMouseOver和onMouseOut事件來實現

2、css效果：滑鼠經過行時，背景圖片改變

把background 指向圖片就可以了嘛

3、html里滑鼠滑過文字背景圖片改變怎麼編寫代碼啊？

可以用樣式中的hover偽類製作。
例子：
a:hover{}
代表滑鼠經過的意思。
改變背景圖片可以寫為：
a{background-image:url(bg1.jpg)}
a:hover{background-image:url(bg2.jpg)}

4、網頁中滑鼠經過導航條背景圖片改變

背景圖片，不用文字。
.on {background:url(images/01.png) no-repeat;}
.on:hover {background:url(images/02.png) no-repeat;}

5、CSS滑鼠經過DIV換背景圖的問題

請問你用的觸發事件是onmousemove還是onmouseover,估計是用了onmousemove吧，改成onmouseover就行了

6、Dreamweaver8中如何製作滑鼠經過背景圖片改變的

http://img.網路.com/img/logo-.gif'"</A> onmouseout="this.src='../pic/login1.gif'">

7、CSS+DIV實現滑鼠經過背景圖片變換

換這種方式試試：onmouseover="this.style.background-image:1.jpg"

8、如何用CSS樣式來實現當滑鼠放上去時會出現另一張背景圖片呢

做好准備工作，把兩張100px X 100px的圖片合成 100 X 200 的。通過CSS圖片定位來達到切換效果。存放在根目錄 img\tupian.gif
<style>
#div_1{width:100px;height:100px;margin:0;padding:0;} 定義一個DIV方框
#div_1 ul,li{list-style:none;margin:0px;padding:0px;} 定義div_1中UL,LI
#div_1 li{float:left;margin:0;}
#div_1 a{
background:url(img/tupian.gif) no-repeat;width:100px;height:100px;display:block;
} 定div_1中鏈接背景樣式等
#a1 a:hover,#a1 a:active{
background-position: 0px -100px;height:100px;
} 定義一個滑鼠懸停狀態
</style>
在BODY中
<div id="div_1"><ul>
<li><a href="#">首頁</a></li>

9、CSS滑鼠經過圖片變亮,移開變變暗效果代碼怎麼寫

1、打開hbuilder，在空白的html文件上面設置一個div，給div一個class並命名為img：

2、在css里設置img的類一定的寬和高，引入示例圖片，設置圖片為不重復。並且給img的類設置「:hover」偽類，設置偽類內的透明度為0.6：

3、打開瀏覽器，在瀏覽器內查看效果：

4、將滑鼠移入圖片，就會發現圖片已經變亮了。以上就是用CSS設置滑鼠經過圖片變亮，移開變變暗效果的演示：

10、CSS中如何讓滑鼠經過時顯示背景圖片

通常可以使用css樣式的 :hover 選擇器，如示例div1。

也可以使用js來控制css樣式，用js可以靈活加入其它效果(延遲顯示、隨機背景圖)，如示例div2。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1{
width: 150px;
height: 150px;
}
.d1:hover{ /*在這里使用hover 來改變背景圖 */
background:url(2531170_142659950000_2.jpg);
}
.d2{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="d1">
div1
</div>
<div class="d2" onmouseover="showbg(this)" onmouseout="hidebg(this)"> 
div2
</div>
</body>
<script>
function showbg(e){
e.style.background="url(2531170_142659950000_2.jpg)"; //用javascript來改變背景圖片樣式
}
function hidebg(e){
e.style.background="none";
}
</script>
</html>

*具體選擇根據需要靈活應用

*注意示例圖片要引用正確

導航:首頁 > 萬維百科 > 網頁設計滑鼠經過背景圖片

網頁設計滑鼠經過背景圖片

與網頁設計滑鼠經過背景圖片相關的知識