它可能的摘要放置菜单在左边像这个图像？

Question

我看到了一个代码 http://codepen.io/pdaoust/pen/fHybA

$(function() {
  $('details').on('mouseover focus', function() {
    $(this).attr('open', true);
  }).on('mouseout blur', function() {
    $(this).attr('open', false);
  })
});

html {
  line-height: 1.5;
}
details {
  width: 20em;
  border: 1px solid #ddd;
  padding: 0 .5em;
}
summary {
  padding: 0 .5em;
  margin: 0 -.5em;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  float: right;
  content: '▾';
  width: 1.5em;
  text-align: center;
  margin-right: -.5em;
}
details[open] summary::before {
  content: '▴';
}

<details tabindex=0>
  <summary>Hi, I am a summary.</summary>
  <p>Well I am some content. <a href="#">Here's a link.</a></p>
</details>

创建一个悬停菜单，但我想知道是否可以使用此菜单左侧像这样的图像

请帮帮我

Answer 1

不能将代码转换为其他内容。该笔中的代码旨在完成它所做的工作，在悬停时显示详细文本。虽然菜单看起来很相似，但它们需要的代码更复杂一些。如果您想要一个菜单​​，请查找适用于菜单的代码。