如何在悬浮图像或文本时隐藏一个div并隐藏另一个div？

Question

您好，下面是代码

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

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

Answer 1

on :hover在h1该div将visible而其他div vill 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();
});

在这里