javascript - onmouseout 无法按需工作

Question

我一直在尝试做的是我有一个框，其中显然包含文本，我希望每当它悬停时，删除当前内容并添加另一个内容，当它悬停时，取回旧的。正如您所意识到的那样，我的尝试进行得并不顺利，我想知道什么是 exacy 问题。提前致谢。

var i1,span1,a1,p1;
function changeContent1() {
    var item = document.getElementById('item1');
    var i = document.getElementById('icon1');
    var span = document.getElementById('itemSpan1');
    i1 = i;
    span1 = span;
    item.removeChild(i);
    item.removeChild(span);
    var p = document.createElement("p");
    var t = document.createTextNode("The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem");
    var a = document.createElement("a");
    a.href = "#";
    p1 = p;
    a1 = a;
    var at = document.createTextNode("Read More");
    p.appendChild(t);
    a.appendChild(at);
    item.appendChild(p);
    item.appendChild(a);
    item.style.background = "#ff3f3f";
    item.style.padding = '0';
}

function resetContent1() {
    var item = document.getElementById('item1');
    item.removeChild(a1);
    item.removeChild(p1);
    item.appendChild(i1);
    item.appendChild(span1);
}

.item {
    width:270px;
    height:270px;
    margin-left:40px;
    float:left;
    box-sizing:border-box;
    border:1px solid #dcdcdc;
    text-align:center;
    padding:100px 0;
}

.item i{
    font-size:3em;
    margin-bottom:20px;
}

.item span {
    font-family:OpenSans-Bold;
    font-size:1.5em;
    text-transform:uppercase;
}

<div class="item" id="item1" onmouseover="changeContent1()" onmouseout="resetContent1()">
               <i class="fa fa-camera" id="icon1"></i><br />
               <span id="itemSpan1">Some text</span>
</div>

Answer 1

您只能使用 html 和 css 来完成。使用 container 和 2 个 div 作为内部文本并隐藏第二个。在 hove 上隐藏第一个并显示第二个。

jsFiddel