Question

我对Javascript / HTML有点陌生。最近，我得到了一个使用CSS或HTML对齐“复仇者联盟”字符框的项目。这是网站外观的图像：

现在，我已经完成了代码的CSS部分：定义图像的框，字符的标题/标题及其描述（在主体中）。对于javascript部分，当鼠标悬停在字符名称框上时，其名称应更改颜色，并在移开后变回其原始颜色。为此，我将使用部分代码来自Iron Man。

CSS：

.ironManHeading { <!-- iron man's heading (goes under image box) -->
    left:0px;
    width: 250px;
    position: relative;
    background-color: #999999;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
    }

Javascript：

    function mouseIM(){ //onmouseover event: heading changes to red background and white text
        document.getElementsByClassName("ironManHeading").bgColor = 'red';
        document.getElementsByClassName("ironManHeading").fontcolor = 'white';
    } // MOUSE EVENTS FOR IRON MAN
    function noMouseIM(){ //onmouseout event: heading changes back to normal colors
        document.getElementsByClassName("ironManHeading").style.bgColor = '#999999';
        document.getElementsByClassName("ironManHeading").style.fontcolor = 'black';
    }

这是正文中的代码：

<h1 class = "ironManHeading" onmouseover = "mouseIM" onmouseout = "noMouseIM">IRON MAN</h1>

这是我尝试过的方法，但是颜色与上面的图像保持相同。我是在做错什么，还是我错过了什么？我还没有掌握声明类的窍门，所以我不确定document.getElementsByClassName是否与之有关。

Answer 1

您只能使用CSS来实现所需的行为，如下所示：

.ironManHeading:hover {
  background-color: red;
  color: white;
}

如果您仍然想将Javascript与onmouseover和onmouseout事件一起使用，请参见以下示例：

function onMouseOver(elem) {
  elem.style.backgroundColor = "red";
  elem.style.color = "white";
}

function onMouseOut(elem) {
  elem.style.backgroundColor = "#999";
  elem.style.color = "black";
}

div {
  background-color: #999;
}

<div onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)">Here's a test</div>

为什么您的事件处理程序不起作用？

这仅仅是因为您调用了以下方法：

onmouseover = "mouseIM"

但是您必须这样称呼它：

onmouseover="mouseIM()"

这是将事件处理函数分配给HTML事件属性的方法。

此外，您可以通过以下方式将引用传递给调用该函数的对象：

onmouseover="mouseIM(this)"

这省去了将调用元素的选择器与document.getElementById()，getElementsByClassName()或querySelector()一起使用的麻烦，并使您也可以灵活地将事件处理程序用于其他元素。因此，根据您的情况，您可以通过使用this参数调用事件处理程序来为每个复仇者盒子调用相同的函数。请参阅上面的事件处理函数中如何使用elem参数。

Answer 2

使用CSS，您可以声明：hover 事件，该事件与javascript中的mouseover和mouseout相同。像这样：

resolve: function (parent, args, { req, res }) {
  const user = await User.findOne({ email: args.email })
  if (user) {
    const isMatch = await bcrypt.compare(args.password, user.password)
    if (isMatch) {
      const cookieValue = user.owner ? 'owner' : 'buyer'
      res.cookie('cookie', cookieValue, { maxAge: 900000, httpOnly: false, path: '/' })
      return user
    }
  }
  // If you want an error returned in the response, just throw it
  throw new Error('Invalid credentials')
}

工作示例（不需要任何JavaScript，一切都由CSS处理）：

.ironManHeading { <!-- iron man's heading (goes under image box) -->
    /* your original definition */
}

<!-- this is the hover event -->
.ironManHeading:hover {
    background-color: red;
    color: white;
}

.Heading {
    left:0px;
    width: 250px;
    position: relative;
    background-color: #999999;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
}

.Heading:hover {
    background-color: red;
    color: white;
}

Answer 3

考虑使用css伪类，如@chrisbyte所述。在这种情况下，您不需要使用JavaScript即可执行所需的操作，请点击下面的链接以了解更多信息！

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

.ironManHeading :hover{
background-color: red;
color: white;
}

如何更改框中的背景颜色和文本颜色？

3 个答案: