如何應用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

回答

相關問題