如何用JavaScript 编写当鼠标放在某一个带有连接的div下时，其背景色变成自己想要的那种颜色？

Posted 2023-05-03

<div id="div1" style="height:700px; width:960px; padding:0px; margin:auto">
<div style="background:#CCC; height:300px; margin-top:25px; width:300px; margin-right:10px; margin-left:20px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:25px;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:25px ;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px; width:300px; margin-right:10px; margin-left:20px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<div style="background:#CCC; height:300px; margin-top:35px ;width:300px; margin-right:10px; float:left"><a href="#" style="border:0"></a></div>
<script>
var oDiv1=document.getElementById('div1');
var oDiv2=oDiv1.getElementsByTagName('div');
for (var i=0;i<oDiv2.length;i++)

oDiv2[i].onmousrover=function ()

this.style['background']='red';


for (var i=0;i<oDiv2.length;i++)

oDiv2[i].onmousrout=function ()

this.style['background']='#ccc';


</script>
当div里放的是图片时该怎么做?谢谢！

亲，在onmouseover的事件处理函数里面改变style.background就可以了追问

for (var i=0;i<oDiv2.length;i++)

oDiv2[i].onmousrover=function ()

this.style['background']='red';


这样写显示不了的！能帮我写一个比较完整点的答案吗？谢谢啦！

追答

改好了你看一下，你的div1少了结束标

<script type='text/javascript'>
      var aDiv=document.getElementById('div1').getElementsByTagName('div');
     for(var i=0;i<aDiv.length;i++)
     
        aDiv[i].onmouseover=function()
          this.style.background='red';
        
     
     for(var i=0;i<aDiv.length;i++)
     
        aDiv[i].onmouseout=function()
          this.style.background='#ccc';
        
     
</script>

参考技术A css能实现为何用js？追问

放在淘宝店铺里的，一般的纯CSS做不了！怎么做呢？

如何用javascript编写一个又一个元素？ [复制]

【中文标题】如何用javascript编写一个又一个元素？ [复制]

【英文标题】：How to write an element just after another with javascript? [duplicate]

【发布时间】：2011-09-04 15:51:47

【问题描述】：

我需要在另一个元素（文本区域）之后添加一个 onclick 元素。

我该怎么做？

【问题讨论】：

请发布一个示例，即您拥有的 HTML 和您想要获取的 HTML。 click 处理程序绑定到哪里？

【参考方案1】：

更新：此问题可能无法正确回答问题，但已被选为正确答案。所以我在这里添加正确答案，因为大多数人不会滚动过去，而且原作者已经很多年没有访问 ***。

来自@RobG的正确答案

var div = document.getElementById( 'div' );
var newText = document.createElement( 'textarea' ); // create new textarea
div.parentNode.insertBefore( newText, div.nextSibling );

旧的无关答案：

可以使用 appendChild 方法添加新元素

HTML

<div id='div'>
  <textarea></textarea>
</div>

Javascript

var div = document.getElementById('div');

var newText = document.createElement('textarea'); // create new textarea

div.appendChild(newText); // add it to the div

生成的 HTML

<div id='div'>
  <textarea></textarea>
  <textarea></textarea>
</div>

【讨论】：

如果我想在一个特定的之后而不是最后一个之后添加一个 textarea 怎么办？

不，这不是答案。

请注意getElementById可能无法在IE中使用

@student getElementById 可能无法在 IE 中使用？你是认真的吗？你用过 IE 吗？

这不会在末尾插入，而是在末尾插入。

【参考方案2】：

接受的答案将在这种特定情况下起作用，但更一般地，要在一个又一个元素之后插入一个元素，以下工作可以完成：

someElement.parentNode.insertBefore(newElement, someElement.nextSibling);

newElement 是要插入的元素，someElement 是要插入的元素。

Node interface 的 W3C insertBefore 方法

【讨论】：

请注意nextSibling可能无法在IE中使用

@student–nextSibling 是在 DOM 级别 1 (1998) 中引入的，至少可以追溯到 IE 5。

【参考方案3】：

outerHTML 方法也可以解决问题：

allAloneElement.outerHTML+='<p>I am the new element</p>'

【讨论】：

像接受的答案一样，这也假设新元素应该放在最后。