Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Shadow creation on tag li hover event and overflow siblings elements?

align element

  • Please log in to reply
1 reply to this topic

#1 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 16 November 2011 - 06:39 AM

look at my fiddle example

source:

<ul class='ultag'>
<li><span>color 1</span></li>
<li><span>color 2</span></li>
<li><span>color 3</span></li>
</ul>


ul.ultag {
position: absolute; left: 5%; top: 0;
width: 100px;
height: 50px;
border: 2px solid red;
}
ul.ultag li {
width: 99px;
height: 15px;
background-color: lightblue;
float: left;
border: 1px solid grey;
text-align: center;
}
ul.ultag li span {
position: relative; left: 0; top: 0;
display: block;
width: 100%;
height: 90%;
margin-top: -4px;
overflow: visible;
}
ul.ultag li:hover {
box-shadow: 0 0 5px 5px #000000;
}


I need that shadow was over siblings li, so how can I do that? The last li behavior I very like, but the others is... not much.
  • 0

#2 oldhendra

oldhendra

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 52 posts
  • Location:jakarta, indonesia
  • Programming Language:JavaScript, Pascal, Others
  • Learning:C, PHP, Others

Posted 17 November 2011 - 12:06 AM

Like this? I haven't test it but only through my FF8:
ul.ultag li:hover {   box-shadow: 0 0 5px 5px #000000;
position:relative;
z-index:10; }

Edited by oldhendra, 17 November 2011 - 12:08 AM.
compatibility

  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download