小辣椒想要的鼠标指针滑过时盒子底色变化的代码
这个有两种实现方式：纯CSS和JS。事实上，JS也是要借助CSS来达成效果的，所以CSS才是真正的基础。不同的是，CSS有自己的语言规范。直接上代码：
<style type="text/css">
.clBox {
margin: 10px auto;
padding: 10px;
width: 300px;
height: 150px;
background: olive;
cursor: pointer;
}
.clBox:hover {
background: tomato;
}
</style>
<div class="clBox">CSS控制鼠标移进移出时的窗体颜色</div>
<div id="jsBox">JS控制鼠标移进移出时的窗体颜色</div>
<script>
var jsBox = document.getElementById('jsBox');
with(jsBox.style){//样式设定
margin = "10px auto";
padding = "10px";
width = "300px";
height = "150px";
background = "red";
cursor = "pointer";
}
jsBox.onmousemove = function(){
jsBox.style.background = "green";
}
jsBox.onmouseout = function(){
jsBox.style.background = "red";
}
</script>
说明一下JS部分:
这里，JS通过ID索引来控制 id="jsBox" 的 div，我先用JS设定盒子的基本样式，然后设置两个自定义函数，一个是鼠标指针移动到对象的事件即 onmousemove() 事件，另一个是鼠标指针移出对象界面的事件即 onmouseout() 事件，事件发生时分别设置不同的背景色（移出是背景色和原先的设置一样）。
可以看得出，JS相对CSS的设置较为麻烦，且JS也是去设定CSS样式的。 本帖最后由 马黑黑 于 2022-1-15 15:43 编辑
还有一个重要的问题要提一下：web页元素的id索引是唯一的，一个索引号在同一页里只能有一个，有多个id相同的元素会出错。
比如：
<img id="pic" src="..." />
<div id="pic"></div>
这里，<img>标签和<div>标签都用了相同的 id 索引，这是不对的，一个 id 只允许一个元素使用一次。
送个分分走人，反正俺如看天书。{:4_189:} 樵歌 发表于 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
嗯嗯。
{:4_180:} 绿叶清舟 发表于 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*系列动作，以及左右就单击、双击甚至鼠标滑轮的动作，都可以进行开发 谢谢万能的黑黑，小辣椒会学习练习一下{:4_187:} 小辣椒 发表于 2022-1-15 21:04
谢谢万能的黑黑，小辣椒会学习练习一下
万能是不可能的{:4_170:} 绿叶清舟 发表于 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相同 ...
我自己现在去测试一下
页:
[1]
2