divにdivスタイルを適用してdivにネストされたdiv

Question

基本的には、いくつかのテキストの上にボックスがあり、上にマウスを置くと下に移動してテキストが非表示になります。

<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ですか？

Answer 1

わからないを非表示にするが、これはどのように簡単です、あなたの問題はそれで解決されます：

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>

Answer 2

なぜエクストラクラスの代わりに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>

Answer 3

使用#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>

あなたはjQueryのソリューションに興味があるなら