如何制作<细节>鼠标悬停 [英] How to make <details> drop down on mouse hover
本文介绍了如何制作<细节>鼠标悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有人可以帮助我如何使用CSS使鼠标悬停时的详细信息下拉列表
can anybody help me on how to make the details dropdown on mouse hover using css
这是html代码
<details>
<summary>Sample</summary>
Details of sample
</details>
当鼠标悬停在上面时,我需要一个CSS代码才能将其放下,有人可以帮我吗?
I need a css code for it to drop down when the mouse hovers on it can anybody help me on 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();
});
});
在此处查看我的 jsfidle
这篇关于如何制作<细节>鼠标悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文