Html 如何在悬停标记上显示块

如何在悬停

a

标签上打开

div

标签

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

<div id="Services">
    <h1>Hello</h1>
</div>

这是我在悬停标记上显示div标记的代码

#服务

是

a

标签的

id

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

<div id="Services">
    <h1>Hello</h1>
</div>

#服务

是

div

标签的

id

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

<div id="Services">
    <h1>Hello</h1>
</div>

我的条件是标签在

ul

内定义，

li

标签和

div

标签在

ul

标签外定义

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

<div id="Services">
    <h1>Hello</h1>
</div>

---

要使

+

CSS选择器工作，您需要

#Services

成为

#Services

的直接同级

因为这里不是这样，所以您必须：

• 更改HTML标记以满足此要求
• 或者使用Javascript获得所需的行为

---

这将起作用-请注意，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>

#服务{
显示：无；
}
#服务：悬停+服务{
显示：块；
}

你好

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

#服务{
显示：无；
}
jQuery（函数（$）{
$（“#服务”）.mouseover（函数（）{
$（“#服务”）.show（）；
}).mouseout（函数（）{
$（“#服务”）.hide（）；
});
});


你好

如果我没弄错的话，我是第二次看到这个问题了，你又发了一次，对吗？啊，是的，你做这个很困难，是吗？3个问题，同样的问题，你正在尝试的方式是行不通的，CSS不能从一个元素中弹出并选择其他元素，在你的HTML中，元素不是相邻的，所以让它们相邻，或者使用JavaScription。这是怎么回事？