0

我试图制作一个 div 动画onmouseover，但它不起作用

这是我.style.animation用于 Internet Explorer 和 Firefox 以及.style.webkitanimationchrome 的 javascript：

function emailhelp() { 

  document.getElementById('help-text').innerHTML = 'Enter you´re email';
  document.getElementById('help-box').style.animation ='myfirst 5s;';
  document.getElementById('help-box').style.webkitanimation ='myfirst 5s;';

}

这是CSS：

@keyframes myfirst
{
  from {background-color:#00304c;}
  to {background-color:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  from {background-color:#00304c;}
  to {background-color:yellow;}
}
#help-box {
 position: fixed;
 top: 82px;
 left: 50%;
 margin-left: 289px;
 font-size: 12px;
 background-color: #00304c;
 height: 32px;
 width: 250px;
 line-height: 32px;
 padding-left: 10px;
 margin-right: 0px;
 text-align:center;
}

这是我的 HTML：

<input class="user-input" name="" type="text" value="email" onmouseover="emailhelp()" onmouseout="helphide()" onfocus="if(this.value == 'email') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'email'; }" onmouseover="emailhelp()" onmouseout="helphide()" />
4

2 回答 2

0

您需要大写该属性（至少对于 webkit）：

document.getElementById('help-box').style.WebkitAnimation ='myfirst 5s';

对于 FF，您的代码应该没问题：

document.getElementById('help-box').style.animation ='myfirst 5s';

这是一个演示：http: //jsfiddle.net/E4vSx/

于 2013-04-24T11:20:10.680 回答
0

在您选择另一个答案之前，这是我为您服务的地方。

使用内联 javascript 被认为是不好的做法。

<input class="user-input" name="" type="text" value="email" />
<div id="help-box">
    <div id="help-text"></div>
</div>

var input = document.getElementsByClassName("user-input")[0];
var helpBox = document.getElementById("help-box");
var helptext = document.getElementById("help-text");

helpBox.style.visibility = "hidden";

function emailhelp() {
    helpBox.style.visibility = "visible";

    helptext.textContent = "Enter your email";

    helptext.style.WebkitAnimation = "myfirst 5s";
    helptext.style.animation = "myfirst 5s";
}

function helphide() {
    helpBox.style.visibility = "hidden";
}

function focus(evt) {
    if (evt.target.value === "email") {
        evt.target.value = "";
    }
}

function blur(evt) {
    if (evt.target.value === "") {
        evt.target.value = "email";
    }
}

input.addEventListener("mouseover", emailhelp, false);
input.addEventListener("mouseout", helphide, false);
input.addEventListener("focus", focus, false);
input.addEventListener("blur", blur, false);

在jsfiddle上

于 2013-04-24T11:28:45.933 回答