Question

我一直在努力做的是，我有一个明显包含文本的盒子，我希望无论什么时候盘旋，删除当前内容并添加另一个内容，当它徘徊时，要取回旧的。而你所意识到的尝试并不顺利，我想知道什么是外来问题。提前谢谢。

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

onmouseout没有按需工作

1 个答案: