Javascript更改HTML'；在'；onmouseover'；事件

当用户将光标移到项目上时，我需要更改HTML

元素的边框颜色，当鼠标移到项目上时，我还需要更改光标图标。我试过了，但上面写着“语法错误”

HTML

<li class="post-item-parent-div" onmouseover="onItemHover(this)" >
    <!-- More HTML Code -->
</li>

---

我对Javascript非常陌生，所以请帮忙：）

为什么不使用

：hover

选择器

li.post-item-parent-div:hover
{
    border-top: 12px solid #0084FD;
    border-left: 12px solid #0084FD;
    cursor: pointer;
}

---

JSFIDLE示例：

您需要更改css属性名称，如下所示，因为带有

-

的样式名称不能直接在javascript中使用

有关JavaCScript中css属性的引用名称，请参见

函数覆盖（x）{
x、 style.borderTop=“12px solid#0084FD”；
x、 style.borderLeft=“12px solid#0084FD”；
x、 style.cursor=“指针”；
}

一些代码

这样做可以：

function onItemHover(x) {
   x.setAttribute("style", "border-top: 12px solid #0084FD; border-left: 12px solid #0084FD;cursor:pointer;");
}

添加此代码

    var item = document.getElementById("button");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func()
{  // not needed since item is already global, 
   // I am assuming this is here just because it's sample code?
   // var item = document.getElementById("button"); 
   item.setAttribute("style", "background-color:blue;")
}

function func1()
{  
   item.setAttribute("style", "background-color:green;")
}

---

是的，您需要创建一个新的

.css

文件并引用它，或者将其添加到页面的

中。不，我需要Javascript，因为我需要通过它调用其他函数。您可能应该指定要调用的其他函数，特别是由于您的问题标题正在更改CSS属性……我已经在tite:）@Earthling:I中指定它是一个Javascript“onmouseevent”。然而，这是实现你想要做的事情的最优雅的方式。在编写程序时，有一些特定的标准和精神。对于HTML/CSS/JavaScript，HTML应该只包含标记。CSS应该用来定义外观和感觉，JavaScript是你的逻辑所在。伙计们，我需要JavaScript，因为我需要通过itI调用其他函数。我认为你错过了

x

之后的

样式？
    var item = document.getElementById("button");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func()
{  // not needed since item is already global, 
   // I am assuming this is here just because it's sample code?
   // var item = document.getElementById("button"); 
   item.setAttribute("style", "background-color:blue;")
}

function func1()
{  
   item.setAttribute("style", "background-color:green;")
}