不知道是不是风中飞尘要的

马黑黑

一、CSS方法，鼠标指针滑过链接，盒子移动——

鼠标滑过这里

马黑黑

一楼效果代码：请确保 div  和 a 是兄弟层级关系！

1. 
   
2. <style>
   
3. #mybox {
   
4.         margin: 10px;
   
5.         width: 100px;
   
6.         height: 80px;
   
7.         transition: 1s;
   
8.         background: lightgreen;
   
9. }
   
10. #mybox:has(~ #mao:hover) {
    
11.         transform: translate(200px);
    
12. }
    
13. </style>
    
14. 
    
15. <div id="mybox"></div>
    
16. <a id="mao">鼠标滑过这里</a>

复制代码

马黑黑

二、js方法——

<style>
#mydiv {
        margin: 10px;
        width: 100px;
        height: 80px;
        transition: 1s;
        background: lightgreen;
}

</style>

<div id="mydiv"></div>
<a id="mao1">鼠标滑过这里</a>

<script>
mao1.onmouseover = () => {
        mydiv.style.transform = 'translate(200px)';
}

mao1.onmouseout = () => {
        mydiv.style.transform = 'translate(0px)';
}

</script>

马黑黑

效果：

鼠标滑过这里

非常开心

老师好！在上面可以加字吗？

非常开心

加图也不在框里

红影

html 的a标签自动带下划线呢。

亦是金

试试老师图片移动的效果！

鼠标滑过这里图片移动

亦是金

奇怪！本地上会动，放在网上就不动了！

马黑黑

非常开心 发表于 2023-4-3 09:16
老师好！在上面可以加字吗？

当然可以

马黑黑

亦是金 发表于 2023-4-3 12:00
奇怪！本地上会动，放在网上就不动了！

检查一下哪里出了瑕疵

亦是金

怎么回事？占了老师的地板位置了！抱歉！！！

马黑黑

亦是金 发表于 2023-4-3 12:00
奇怪！本地上会动，放在网上就不动了！

我看了一下，同一页有相同的 id ，这不允许，我修改了我的楼，你这就可以动了

马黑黑

亦是金 发表于 2023-4-3 12:03
怎么回事？占了老师的地板位置了！抱歉！！！

没事的。通过这样的测试，可以理解一个道理：同一页里面，不能存在两个相同id的元素。

亦是金

谢谢老师！动了！

马黑黑

亦是金 发表于 2023-4-3 12:06
谢谢老师！动了！

图片尺寸较大，可以让它移动的距离也大一些（当然也根据实际需要来），图片的transition属性也相应修改以便让图片的移动更平滑

亦是金

谢谢老师指导！

樵歌

我居然把把第二个弄动了

亦是金

将transition: 1s; 改为：        transition: 3s;  图片移动平滑多了！谢谢老师指点！

风中飞尘

能不能，，鼠标触碰到链接，图片才显示出来，在从左到右划过图片自动消失，，，而不是直接显示图片