css - Div hover on icon with SASS -


this question has answer here:

i doing mistakes on how show div when hover mouse on icon text.

the problem div comes out when hover on entire line of title. problem in sass or in structure of page, o both? want div coming out on mouse hover in icon info

you can see example here: http://codepen.io/anon/pen/gdujf

here html:

<div id="spincastjs">     <div id="spintitle">       <h1>example<span id="spininfo">i</span></h1>       <div id="instructions">         <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been 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

you need have element show, inside #spaninfo span

for eg: have put in code below, div id test inside span 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

Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more