CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1234
user1234

Reputation: 3159

How to align the overlay with the list of icons on hover- JS /CSS

I have a list of <li>'s and a icon next to it which on hover shows an overlay with the information about the 'test'. something like below:

test1 enter image description here

test2 enter image description here

test3 enter image description here

and so on....

html:

<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
  //details about the 'test1','test2'..so on
</div>

js:

$('span.account-info-icon').on("mouseenter", function(event){
  $("#hover-container").show();
   }).on("mouseout", function(){
      $("#hover-container").hide(); 
    });

The above code works fine to show/hide the div container on hover. However I'm having issues with the positioning of the overlay. im using css to position the overlay, as a result of which, the overlay is always positioned below irrespective of which ever icon i hover. in short because im hard coding the values of the <div> conatiner the overlay always shows at one place and does not move as per the hover over the icons. Below is the css im using to position the overlay.

CSS:

#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;

}

Basically what i m trying is to allign the overlay per the flow of the hover. so when i hover over , say: 'test1' icon, the overlay should display next to it. I'm not sure if this is achievable via CSS or Js. Any ideas appreciated!!!!

Thanks in advance!

Upvotes: 0

Views: 348

Answers (2)

Subhranshu
Subhranshu

Reputation: 445

please refer to the fiddle - http://jsfiddle.net/L33jo3j7/4/

Pretty much $el.hover() solves the thing.

and let me know if you have any doubts.

This looks better- http://jsfiddle.net/L33jo3j7/4/

Upvotes: 0

phpenthusiast
phpenthusiast

Reputation: 101

To simplify this exercise, become familiar with two css position values: "position:relative" and "position:absolute". Also, proper container arrangement will help you get favorable results.

On the premise that #hover-container just happens to generically refer to a non-replicated ID property in your html, it can have this css definition:

#hover-container{
    display:none;
    position:absolute;
    padding: 2px 0px 0px 9px;
    left:100px;
}

Each instance of your span should then be in a wrapper container to help guide the hover to appear exactly where you want it:

.info-row-wrapper {
    position:relative;
}

Pulling all of these together, you have:

<div class="info-row-wrapper">
    <span class="account-info-icon"></span> // icon is the build using image sprites
    <div id ="hover-container>
        //details about the 'test1','test2'..so on
    </div>
</div>

Here, the wrapper container gives a shell that the absolute positioned element appears inside of. The absolute positioned element respects the position of the parent html container that is explicitly positioned relative (if not already assigned a css position attribute)

Upvotes: 1

Related Questions