如何制作<'details'>放下鼠标悬停 [英] How to make <'details'> drop down on mouse hover

问题描述

任何人都可以帮助我如何使用css制作鼠标悬停的详细信息下拉菜单 这是html代码

 < details> 
< summary>样本< / summary> 
 
示例
的详细信息< / details> 
  

我需要一个css代码才能在鼠标悬停时下拉它，任何人都可以帮助我这样做？

解决方案

试试这个： $ b

 < div id =summary>示例< / div> 
< div id =detail> theis摘要详情< / div> 
  

CSS：

  #summary {
 background：＃666; 
 width：100px; 
颜色：#fff; 
} 
 
 #summary：hover {
 cursor：pointer; 
颜色：＃fff200; 
} 
 
 #detail {
 width：300px; 
 height：300px; 
背景：＃fff200; 
 display：none; 
 
  

JavaScript：

  $（document）.ready（function（）{
 $（'＃summary'）。hover（function（）{
 $（'＃detail'）。toggle（）; 
}）; 
}）; 
  

查看我的 jsfidle 在这里

can anybody help me on how to make the details dropdown on mouse hover using css

This is the html code

<details>
  <summary>Sample</summary>

Details of sample
</details>

I need a css code for it to drop down when the mouse hovers on it can anybody help me on this?

解决方案

Try this:

HTML:

<div id="summary">Sample</div>
<div id="detail">Detail of theis summary</div>

CSS:

#summary {
    background: #666;
    width: 100px;
    color: #fff;
}

#summary:hover {
    cursor: pointer;
    color: #fff200;
}

#detail {
    width: 300px;
    height: 300px;
    background: #fff200;
    display: none;
}

JavaScript:

$(document).ready( function() {
    $('#summary').hover( function() {
        $('#detail').toggle();
    });
});

See my jsfidle here

这篇关于如何制作<'details'>放下鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！