如何应用CSS样式的div和嵌套在div

所以，基本上我有一些文字的机顶盒，而当你将鼠标悬停在它，它会往下走，并隐藏文本的DIV：如何应用CSS样式的div和嵌套在div

<div id="box" onmouseover="tran1()" onmouseout="tran2()"> 
    <p id="par"><b>Hover Me.</b></p> 
</div> 

<p id="movealong">I will hide!</p>

这里的脚本：

function tran1() { 
    document.getElementById("par").innerHTML = "<b>Where'd he go?</b>"; 
} 
function tran2() { 
    document.getElementById("par").innerHTML = "<b>Hover Me.</b>"; 
}

最后的CSS让它下去，

#box { 
    width:100px; 
    height:95px; 
    border:3px solid #000; 
    border-radius: 8px; 
    background-color:#06F; 
    text-align:center; 
} 
#box:hover { 
    width:100px; 
    height:150px; 
    border:3px solid #000; 
    border-radius: 8px; 
    background-color:#066; 
}

然而，当我将鼠标悬停在文本中，文字变回“悬停我”。如何拨打box和par？这是CSS的问题还是JS？

来源

2016-12-05 MCGuy

为了让机器人 - .PAR和.box的元素，你可以设置onmouseover和onmouseout事件票面，并给该元素的功能。在那里你可以通过使用.parentNode获得父元素 –

使用'onmouseleave'而不是'onmouseout'。你可以看到两者之间的区别[这里]（http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout）。 –

不知道如果你有兴趣在一个jQuery的解决方案，但是这是多么简单的你问题用它解决：

var $par = $('#par'); 
 
$('#box').hover(function() { 
 
    // On mousein 
 
    $par.html("Where'd he go?"); 
 
}, function() { 
 
    // On mouseout 
 
    $par.html('Hover Me.'); 
 
});

#box { 
 
    width: 100px; 
 
    height: 95px; 
 
    border: 3px solid #000; 
 
    border-radius: 8px; 
 
    background-color: #06F; 
 
    text-align: center; 
 
} 
 
#box:hover { 
 
    width: 100px; 
 
    height: 150px; 
 
    border: 3px solid #000; 
 
    border-radius: 8px; 
 
    background-color: #066; 
 
}

<div id="box"> 
 
    <p id="par"><b>Hover Me.</b></p> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来源

2016-12-05 21:27:45

为什么使用JS代替文本更改而不是类？

function showHidden(el) { 
 
    el.className += " showHidden"; 
 
} 
 
function hideHidden(el) { 
 
    el.className = ""; 
 
}

.hidden { 
 
    display: none; 
 
    } 
 

 
div.showHidden p { 
 
    display: none; 
 
    } 
 

 
div.showHidden p.hidden { 
 
    display: block; 
 
    }

<div onmouseover="showHidden(this)" onmouseout="hideHidden(this)"><p>Hover me</p><p class="hidden">Hide me</p></div>

来源

2016-12-05 21:16:33

-1

使用#box:hover + P#movealong{隐藏元素

function tran1() { 
 
    document.getElementById("par").innerHTML = "<b>Where'd he go?</b>"; 
 
} 
 
function tran2() { 
 
    document.getElementById("par").innerHTML = "<b>Hover Me.</b>"; 
 
}

#box { 
 
    width:100px; 
 
    height:95px; 
 
    border:3px solid #000; 
 
    border-radius: 8px; 
 
    background-color:#06F; 
 
    text-align:center; 
 
} 
 
#box:hover { 
 
    width:100px; 
 
    height:150px; 
 
    border:3px solid #000; 
 
    border-radius: 8px; 
 
    background-color:#066; 
 
} 
 
#box:hover + P#movealong{ 
 
    display:none; 
 
}

<div id="box" onmouseover="tran1()" onmouseout="tran2()"> 
 
    <p id="par"><b>Hover Me.</b></p> 
 
</div> 
 

 
<p id="movealong">I will hide!</p>

来源

2016-12-05 21:17:26 jafarbtech

如何应用CSS样式的div和嵌套在div

回答

相关问题