0

ここでコードを見ることができます: 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;
4

5 に答える 5

3

最初にやりたいことは、ブラウザの開発ツールを見つけることです。Chrome と IE では F12 を押しますが、メニューのどこかにあります。開発ツール コンソールは、特にエラーを報告します。

ここでは、 が にgetElementsByClass存在しないことを示していますdocument。メソッドはgetElementsByClassName最後に呼び出されます (「名前」に注意してください)。

NodeListそれを過ぎると、プロパティがないと不平を言うことがわかりstyleます。(ノードのリスト、この場合は要素) をgetElementsByClassName返します。NodeListそれぞれにstyleがありますが、リストはありません。そのため、各要素のスタイルを操作するには、リストをループする必要があります。

于 2013-10-04T08:14:28.643 に答える
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 に答える
1

私も専門家ではありませんが、css に .welcomebox:hover { box-shadow here } を追加してみませんか?

于 2013-10-04T09:56:55.383 に答える