Question

您可以在此处查看代码：http://jsfiddle.net/KfwyL/ 我有一个div，div里面有一个h1。我有h1设置，所以在悬停时它变为绿色。我想这样做，当鼠标悬停在h1上时，div会得到一个盒子阴影。我的代码无效。

HTML：

<!DOCTYPE html>
<head> 
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css"> 
<title> Max Pleaner's First Website
</title>
</head>
<body>
  <div class="welcomebox"> 
    <h1 class="welcometext">Welcome to my site.
    </h1> 
    </div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>

css：

body {
    background-image:url('../images/sharks.jpg');
    }

.welcomebox {background-color:#1C0245;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  width: 390px;
  height: 78px;
    margin-left:100px;
    margin-top:28px;
    border-style:solid;
  border-width:medium;
}

h1 {
    display:inline-block;
    margin-left: 12px;
    height: 40px;
    width: 357px;
    background-color: #670715;
    padding: 4px;
    position: relative;
    bottom: 5px;
    -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}

h1:hover {background-color: green;}

Javascript：

welcomeboxshadow = document.getElementsByClass("welcometext");

function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;

Answer 1

您要做的第一件事就是发现浏览器的开发工具。在Chrome和IE上，按F12，但您可以在菜单中的某个位置找到它。开发工具控制台报告错误等。

此处会告诉您getElementsByClass上不存在document。该方法最后称为getElementsByClassName（注意“名称”）。

一旦过去，您会发现它会抱怨NodeList没有style属性。 getElementsByClassName返回NodeList（节点列表，在本例中为元素）。其中每个都有style，但不是列表。因此，您必须遍历列表才能使用每个元素的样式。

Answer 2

这不会使用您的事件侦听器，但会让您了解如何应用投影。这使用jQuery。 http://jsfiddle.net/KfwyL/20/

我修改了你的html，因为它不希望你使用头部/身体标签。

<div class="welcomebox"> 
    <h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
    </h1> 
    </div>

的CSS：

.welcomebox {background-color:#1C0245;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  width: 390px;
  height: 78px;
    margin-left:100px;
    margin-top:28px;
    border-style:solid;
  border-width:medium;
}

h1 {
    display:inline-block;
    margin-left: 12px;
    height: 40px;
    width: 357px;
    background-color: #670715;
    padding: 4px;
    position: relative;
    bottom: 5px;
    -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}

h1:hover {background-color: green;}

.boxshadow
{
    box-shadow: 10px 10px 5px #888888;
}

Answer 3

here是你的代码的工作版本，它不使用jQuery，因为我想你想知道如何在纯JS中执行此操作...

welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover', 
                                  function() {
                                      var topbox = document.getElementsByClassName("welcomebox");
 topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
                                  }, false)

我将内联样式更改为类，但概念是相同的。

问题主要是无效的函数名称（getElementsByClass * Name *），试图设置不存在的属性（topbox.style.box-shadow）

此外，您需要记住该函数返回一个集合，而不是单个元素，因此您需要使用[0]

来引用它。

请注意，我建议不要在此使用原始js方法例如，我更喜欢使用jQuery，因为它更清洁，一旦你超越任何简单的代码，你会很高兴你使用它

Answer 4

这是一个工作版本，其中框阴影无需使用jQuery即可正常工作：

Live demo

使用Javascript：

welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)

HTML更改：

  <div class="welcomebox" id="welcomeDiv"> 
    <h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>

Answer 5

我也不是专家，但为什么不添加： .welcomebox：悬停{box-shadow here} 你的css？

调试JavaScript＆amp; css代码：添加事件处理程序

5 个答案: