javascript - onmouse out not working as needed -
what i've been trying have box, contains text , want whenever hovered, remove current content , add 1 , when hovered out, old one. , attempts realise not going well, know what's exacy problem. in advance.
var i1,span1,a1,p1; function changecontent1() { var item = document.getelementbyid('item1'); var = 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 has more-or-less normal distribution of letters, opposed using 'content here, content here', making readable english. many desktop publishing packages , web page editors use lorem"); var = document.createelement("a"); a.href = "#"; p1 = p; a1 = a; var @ = 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>
you ca html
, css
. use container
, 2 div
s texts inside , hide second. on hove
hide first , show second.
Comments
Post a Comment