如何制作<细节>鼠标悬停 [英] 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屋！