Question

当你用鼠标悬停在Icon文本上时，我在如何显示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范围内显示要显示的元素

例如：我已经在下面的代码中输入了一个div内部的id测试，仅用于示例。

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

Div将鼠标悬停在带有SASS的图标上

1 个答案:

HTML

萨斯