如何使<'details'>下拉鼠标悬停

Question

任何人都可以帮助我如何使用CSS将鼠标悬停的详细信息下拉

这是html代码

<details>
  <summary>Sample</summary>

Details of sample
</details>

当鼠标悬停在它上面时,我需要一个css代码才能下载它可以帮助我吗？

Answer 1

tepkenvannkorn的解决方案可行,但在这种情况下您不需要使用JavaScript.

HTML

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

(注意摘要先于细节)

CSS

#summary:hover + #detail, #detail:hover {
  display: block;
}
#detail {
  display: none;
}

http://jsfiddle.net/vSsc5/1/

Answer 2

尝试这个：

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();
    });
});

在这里查看我的jsfiddle