如何隐藏一个div并隐藏另一个div在悬停的图像或文本上？

Question

嗨，假设下面是代码

<h1>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme"><Hide</div>

如果我将鼠标悬停在文本上，则应显示带有id showme的div并隐藏我应隐藏。请在jscript或css中提供解决方案。谢谢

Answer 1

<{1>} :hover h1上的div将为visible而其他div将为hidden

h1:hover ~ #showme,
#hideme {
  display: block
}
h1:hover ~ #hideme,
#showme {
  display: none
}

<h1>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme">Hide</div>

Answer 2

可能的jquery解决方案：

<h1 class='hover'>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme">Hide</div>

$('#hideme').show();
$('.hover').hover(function () {
    $('#hideme').hide();
}, function(){
    $('#hideme').show();
});

FIDDLE HERE