Question

如何在悬停 div代码

上打开a代码
这是我在悬停标签时显示div标签的代码

#Service是id代码的a

#Services是id代码的div

我的条件是标记在ul内定义，li标记和div标记在ul标记之外定义

<ul><li><a href="#" id="Service">Services</a></li></ul> <div id="Services"> <h1>Hello</h1> </div>

CSS

#Services { display: none; } #Service:hover + #Services { display: block; }

Answer 1

要使+ CSS选择器生效，您需要#Services成为#Service的直接兄弟。

由于情况不是这样，你必须：

更改HTML标记以符合此要求
或使用Javascript 获取所需的行为

Answer 2

这将有效 - 请注意，Services div是链接的兄弟：

<style type="text/css">
#Services{
  display: none;
}
#Service:hover + #Services {
     display: block;
}
</style>
<ul><li>
<a href="#" id="Service">Services</a>
  <div id="Services">
      <h1>Hello</h1>
  </div>
</li></ul>

Answer 3

或者使用jquery的javascript方式 - 它会使你的html保持不变：

<style type="text/css">
#Services{
  display: none;
}
</style>
<script src="js/jquery.js"></script> 
<script type="text/javascript">
jQuery(function($){
  $("#Service").mouseover(function(){
    $("#Services").show();
  }).mouseout(function(){
  $("#Services").hide();
  });
});
</script>

<ul><li>
<a href="#" id="Service">Services</a>
</li></ul>
<div id="Services">
      <h1>Hello</h1>
</div>

如何在悬停标签时显示块

3 个答案: