0

You can see the code here: http://jsfiddle.net/KfwyL/ I have a div and inside of the div there is an h1. I have the h1 set so that on hover it becomes green. I want to make it so that when the mouse hovers over the h1, the div gets a box shadow. my code is not working.

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;
4

5 回答 5

3

您要做的第一件事是发现浏览器的开发工具。在 Chrome 和 IE 上，按 F12，但您可以在菜单中的某处找到它。除其他事项外，开发工具控制台会报告错误。

在这里它会告诉你getElementsByClass不存在于document. 最后调用该方法getElementsByClassName（注意“名称”）。

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

于 2013-10-04T08:14:28.643 回答
1

Im not an expert either, but why not just add: .welcomebox:hover { box-shadow here } to your css?

于 2013-10-04T09:56:55.383 回答
1

这是您的代码的工作版本，它不使用 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，因为它更简洁，一旦你超越了像你的代码这样简单的东西，你会很高兴你使用它

于 2013-10-04T08:27:39.083 回答
1

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

我修改了您的 html，因为它不希望您使用 head/body 标签。

<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;
}
于 2013-10-04T08:22:40.207 回答
1

这是一个没有使用 jQuery 的盒子阴影正常工作的工作版本：

现场演示

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>
于 2013-10-04T08:30:48.910 回答