0

I am doing some mistakes on how to show a div when you hover with mouse on Icon text.

The problem is that my div comes out when you hover on the entire line of my title. Where is my problem in the sass or in the structure of the page, o both? I want my div coming out on mouse hover just in the Icon info

You can also see the example here: http://codepen.io/anon/pen/gduJF

Here my 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>

and styles

#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
Artiom
  • 7,694
  • 3
  • 38
  • 45
Koala7
  • 1,340
  • 7
  • 41
  • 83
  • Sass has nothing to do with this, it is a CSS limitation. Your span needs to be a sibling or ancestor of the div you wish to hide. – cimmanon Apr 05 '13 at 19:47

1 Answers1

0

You need to have the element to show, inside the #spaninfo span

For eg: I have put in the code below, a div with id test inside span just for the example.

HTML

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

Sass

 #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
Community
  • 1
  • 1
anpsmn
  • 7,217
  • 2
  • 28
  • 44