Javascript 在 'onmouseover' 事件中更改 HTML 的 CSS 属性

Question

我需要在用户将光标移到项目上时更改 HTML <li> 元素的边框颜色，并在鼠标悬停在项目上时更改光标图标。我试过了，但它说 "syntax error"

HTML

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

Javascript

function onItemHover(x) {

    x.border-top = "12px solid #0084FD";
    x.border-left = "12px solid #0084FD";
    x.cursor = "pointer";
}

我是 Javascript 的新手，所以请帮忙 :)

Answer 1

为什么不使用 :hover 选择器？

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

JSFiddle 示例：https://jsfiddle.net/zt66jf39/

Answer 2

您需要像下面这样更改css 属性名称，因为带有- 的样式名称不能直接用于javascript.

有关 javacsriptcss 属性的引用名称，请参见 CSS Properties Reference

function onItemHover(x) {
  x.style.borderTop = "12px solid #0084FD";
  x.style.borderLeft = "12px solid #0084FD";
  x.style.cursor = "pointer";
}

<ul>
  <li class="post-item-parent-div" onmouseover="onItemHover(this)">
    some code
  </li>


</ul>

但还要注意 mouseover event will get triggered when you move to another element within the same parent li, so you might consider using the mouseenter 事件

function onItemHover(x) {
  snippet.log('on over')
}

function onEnter(x) {
  snippet.log('on enter');
  
  x.style.borderTop = "12px solid #0084FD";
  x.style.borderLeft = "12px solid #0084FD";
  x.style.cursor = "pointer";
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<ul>
  <li class="post-item-parent-div" onmouseover="onItemHover(this)" onmouseenter="onEnter(this)">
    some code <span>in span</span>  <a href="#">in link</a>
  </li>

</ul>

Answer 3

这样做：

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

Answer 4

添加此代码

    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;")
}

Javascript 在 'onmouseover' 事件中更改 HTML 的 CSS 属性

Javascript Changing HTML's CSS Attributes in the 'onmouseover' event

html

javascript

javascript-events