<分区>
标签 javascript html css
<分区>
所以，基本上我在一些文本之上有一个框，当你将鼠标悬停在它上面时，它会下降并隐藏文本:
<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 上？
最佳答案
不确定您是否对 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>关于javascript - 如何将 CSS 样式应用于 div 以及嵌套在 div 中的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40983310/