div悬停在带有SASS的图标上[重复]

Question

当您将鼠标悬停在图标文本上时，我在如何显示 div 方面犯了一些错误。

问题是当您将鼠标悬停在标题的整行上时，我的 div 就会出现。我在 sass 或页面结构中的问题在哪里，或者两者兼而有之？ 我希望我的 div 在鼠标悬停时出现在图标信息中

您也可以在此处查看示例：http://codepen.io/anon/pen/gduJF

这是我的 HTML：

<div id="spinCastJs">
    <div id="spintitle">
      <h1>Example<span id="spininfo">i</span></h1>
      <div id="instructions">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
      </div>
    </div>
</div>

和样式

#spinCastJs
  #spintitle
    background: #ddd
    padding: 6px

    h1
    text-align: center
    color: #04677e
    font-weight: bold
    font-size: 1.2em

    #instructions
      display: none
      position: absolute
      background: #ffffff
      right: 0px
      height: 100px

    #spininfo
      float: right
      font-style: normal
      font-size: 1.1em
      background: #ddd
      height: 50px
      width: 18px
      color: #ffffff
      border-radius: 3px
      background: #bf24bf
    &:hover
      #instructions
        display: block
        border: 1px solid #ddd

Answer 1

您需要在#spaninfo span 内显示元素

例如：我在下面的代码中放入了一个 id 为 test 的 div，其中 span 仅用于示例。

HTML

 <h1>Example<span id="spininfo">i<div id="test">test</div></span></h1>

萨斯

 #spintitle
   #spininfo
     float: right
     font-style: normal
     font-size: 1.1em
     background: #ddd
     height: 50px
     width: 18px
     color: #ffffff
     border-radius: 3px
     background: #bf24bf
     display: block
     &:hover
       #test
         display: block
         border: 1px solid #ddd
         color: red