不知道是不是风中飞尘要的
<style>#mybox {
margin: 10px;
width: 100px;
height: 80px;
transition: 1s;
background: lightgreen;
}
#mybox:has(~ #mao:hover) {
transform: translate(200px);
}
</style>
<p>一、CSS方法，鼠标指针滑过链接，盒子移动——<br><br></p>
<div id="mybox"></div>
<a id="mao">鼠标滑过这里</a> 一楼效果代码：请确保 div和 a 是兄弟层级关系！
<style>
#mybox {
margin: 10px;
width: 100px;
height: 80px;
transition: 1s;
background: lightgreen;
}
#mybox:has(~ #mao:hover) {
transform: translate(200px);
}
</style>
<div id="mybox"></div>
<a id="mao">鼠标滑过这里</a>
本帖最后由 马黑黑 于 2023-4-3 08:37 编辑
二、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>
本帖最后由 马黑黑 于 2023-4-3 12:02 编辑 <br /><br /><p>效果：<br><br></p>
<style>
#mydiv22 {
margin: 10px;
width: 100px;
height: 80px;
transition: 1s;
background: lightgreen;
}
</style>
<div id="mydiv22"></div>
<a id="mao111">鼠标滑过这里</a>
<script>
mao111.onmouseover = () => {
mydiv22.style.transform = 'translate(200px)';
}
mao111.onmouseout = () => {
mydiv22.style.transform = 'translate(0px)';
}
</script>
老师好！在上面可以加字吗？ 加图也不在框里 html 的a标签自动带下划线呢。 本帖最后由 亦是金 于 2023-4-3 12:30 编辑 <br /><br />试试老师图片移动的效果！
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1863295">
<style>
#mydiv {
margin: 10px;
width: 600px;
height: 350px;
background: gray url('https://s4.ax1x.com/2022/02/13/HD5I81.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
transition: 3s;
}
</style>
<div id="mydiv"></div>
<br><br><br>
<a id="mao1">鼠标滑过这里图片移动</a>
<script>
mao1.onmouseover = () => {
mydiv.style.transform = 'translate(300px)';
}
mao1.onmouseout = () => {
mydiv.style.transform = 'translate(0px)';
}
</script>
</td></tr></table> 奇怪！本地上会动，放在网上就不动了！{:4_203:} 非常开心 发表于 2023-4-3 09:16
老师好！在上面可以加字吗？
当然可以 亦是金 发表于 2023-4-3 12:00
奇怪！本地上会动，放在网上就不动了！
检查一下哪里出了瑕疵 怎么回事？占了老师的地板位置了！抱歉！！！ 亦是金 发表于 2023-4-3 12:00
奇怪！本地上会动，放在网上就不动了！
我看了一下，同一页有相同的 id ，这不允许，我修改了我的楼，你这就可以动了 亦是金 发表于 2023-4-3 12:03
怎么回事？占了老师的地板位置了！抱歉！！！
没事的。通过这样的测试，可以理解一个道理：同一页里面，不能存在两个相同id的元素。 谢谢老师！动了！{:4_191:} 亦是金 发表于 2023-4-3 12:06
谢谢老师！动了！
图片尺寸较大，可以让它移动的距离也大一些（当然也根据实际需要来），图片的transition属性也相应修改以便让图片的移动更平滑 谢谢老师指导！{:4_191:} 我居然把把第二个弄动了{:4_334:} 将transition: 1s; 改为： transition: 3s;图片移动平滑多了！谢谢老师指点！{:4_191:} 能不能，，鼠标触碰到链接，图片才显示出来，在从左到右划过图片自动消失，，，而不是直接显示图片