小辣椒想要的鼠标指针滑过时盒子底色变化的代码

马黑黑

这个有两种实现方式：纯CSS和JS。事实上，JS也是要借助CSS来达成效果的，所以CSS才是真正的基础。不同的是，CSS有自己的语言规范。

直接上代码：

1. <style type="text/css">
   
2. .clBox {
   
3.         margin: 10px auto;
   
4.         padding: 10px;
   
5.         width: 300px;
   
6.         height: 150px;
   
7.         background: olive;
   
8.         cursor: pointer;
   
9. }
   
10. 
    
11. .clBox:hover {
    
12.         background: tomato;
    
13. }
    
14. 
    
15. </style>
    
16. 
    
17. <div class="clBox">CSS控制鼠标移进移出时的窗体颜色</div>
    
18. <div id="jsBox">JS控制鼠标移进移出时的窗体颜色</div>
    
19. <script>
    
20. 
    
21. var jsBox = document.getElementById('jsBox');
    
22. 
    
23. with(jsBox.style){//样式设定
    
24.         margin = "10px auto";
    
25.         padding = "10px";
    
26.         width = "300px";
    
27.         height = "150px";
    
28.         background = "red";
    
29.         cursor = "pointer";
    
30. }
    
31. 
    
32. jsBox.onmousemove = function(){
    
33.         jsBox.style.background = "green";
    
34. }
    
35. 
    
36. jsBox.onmouseout = function(){
    
37.         jsBox.style.background = "red";
    
38. }
    
39. 
    
40. </script>

复制代码

马黑黑

说明一下JS部分:

这里，JS通过ID索引来控制 id="jsBox" 的 div，我先用JS设定盒子的基本样式，然后设置两个自定义函数，一个是鼠标指针移动到对象的事件即 onmousemove() 事件，另一个是鼠标指针移出对象界面的事件即 onmouseout() 事件，事件发生时分别设置不同的背景色（移出是背景色和原先的设置一样）。

可以看得出，JS相对CSS的设置较为麻烦，且JS也是去设定CSS样式的。

马黑黑

还有一个重要的问题要提一下：web页元素的id索引是唯一的，一个索引号在同一页里只能有一个，有多个id相同的元素会出错。
比如：

<img id="pic" src="..." />
<div id="pic"></div>

这里，<img>标签和<div>标签都用了相同的 id 索引，这是不对的，一个 id 只允许一个元素使用一次。

樵歌

送个分分走人，反正俺如看天书。

马黑黑

樵歌 发表于 2022-1-15 19:23
送个分分走人，反正俺如看天书。

没有基础看了会是一头雾水

樵歌

马黑黑 发表于 2022-1-15 19:47
没有基础看了会是一头雾水

嗯嗯。

红影

你的例子里是把两个程序都写在里面了吧。

马黑黑

红影 发表于 2022-1-15 20:50
你的例子里是把两个程序都写在里面了吧。

对，代码你可以开帖或在本地测试

红影

马黑黑 发表于 2022-1-15 15:37
说明一下JS部分:

这里，JS通过ID索引来控制 id="jsBox" 的 div，我先用JS设定盒子的基本样式，然后设置 ...

嗯，css更简单，只用个hover就行了，而js非常仔细地设置了onmousemove和onmouseout。

如果onmouseout设置了background不一样的颜色，那么鼠标上去以后，就再也回不到background的颜色了呢。

绿叶清舟

这个论坛不能用的吧

马黑黑

樵歌 发表于 2022-1-15 19:53
嗯嗯。

马黑黑

绿叶清舟 发表于 2022-1-15 20:56
这个论坛不能用的吧

可以用

绿叶清舟

马黑黑 发表于 2022-1-15 21:01
可以用

看那些加了JS的播放器评分就飞起来的

马黑黑

红影 发表于 2022-1-15 20:56
嗯，css更简单，只用个hover就行了，而js非常仔细地设置了onmousemove和onmouseout。

如果onmouseout ...

所以JS也有自己的特长，它可以设置多一样颜色呢。还有，实际的交互是要用JS来完成的，想mouse*系列动作，以及左右就单击、双击甚至鼠标滑轮的动作，都可以进行开发

小辣椒

谢谢万能的黑黑，小辣椒会学习练习一下

马黑黑

小辣椒 发表于 2022-1-15 21:04
谢谢万能的黑黑，小辣椒会学习练习一下

万能是不可能的

马黑黑

绿叶清舟 发表于 2022-1-15 21:02
看那些加了JS的播放器评分就飞起来的

这个我不太清楚。可能加了分高兴吧，飞一下也没啥

小辣椒

马黑黑 发表于 2022-1-15 15:39
还有一个重要的问题要提一下：web页元素的id索引是唯一的，一个索引号在同一页里只能有一个，有多个id相同 ...

黑黑，就是说可以用图片上去，会鼠标滑过变色效果？

马黑黑

小辣椒 发表于 2022-1-15 21:06
黑黑，就是说可以用图片上去，会鼠标滑过变色效果？

图片不能直接变色，因为图片是固定了颜色的。但可以修饰图片，如透明度呀、扭曲呀、模糊呀什么的

小辣椒

马黑黑 发表于 2022-1-15 15:39
还有一个重要的问题要提一下：web页元素的id索引是唯一的，一个索引号在同一页里只能有一个，有多个id相同 ...

我自己现在去测试一下