Adding a CSS Border on Hover and Removing It in jQuery - javascript

I'm attempting to add a class to a group of floated list items on hover using jQuery.
I add the class and then remove the added space from the newly-inserted border using margin:-4px so that the list items do not shift around.
That's my intention at least. it's not working. Here is a fiddle:
http://jsfiddle.net/NgXSc/1/
Note how the sibling list items shift on hover. The intended result is the very last list item where upon hovering, nothing moves.

Your margin problem is being caused because although you initially define the margin to be margin-right: 19px, you overwrite it with margin: -4px !important.
Also, there's no need to use jQuery for this - just use the :hover CSS pseudoclass.
I modified your code to produce your desired results:
HTML:
<nav id="cs-client-list">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</nav><!--end cs-client-list-->
CSS:
#cs-client-list { padding: 25px; }
#cs-client-list li {
background: yellow;
float:left;
margin: 0 19px 0 0;}
#cs-client-list li a {
text-indent: -99999px;
width: 111px;
height: 80px;
border: 4px solid transparent; /* use page's background color (ie #fff) if you want the border to display outside the box */
display: block; }
#cs-client-list li a:hover { border-color: #000; }
Preview: http://jsfiddle.net/Wexcode/NgXSc/26/

margin: -4px is not a relative change to 19px. It completely replaces it.
Figuring out that padding adds 4px to both the left and right, you want to subract 8 pixels from the margin and use margin-right: 11px for the .over class. This keeps the list items in their original positions.
See the change in code here: http://jsfiddle.net/NgXSc/21/

Set a transparent border (or set the border-color to the background-color of the element) on the non-hovered element equal to the width of the visible border on the hovered-over element. And remove the !important; it's not necessary, just use specificity:
#cs-client-list li a{float:left;display:block;text-indent:-99999px;height:80px;background-color:yellow;width:111px; border: 4px solid transparent;}
#cs-client-list li a.over{border:4px solid #000;cursor:pointer;}
Updated JS Fiddle
This does not need jQuery, not even in IE6...

Dont mess about with negative margins. Change your .over class to
#cs-client-list li a.over{ border: 4px solid #000; width: 103px; }
This is the quickest way to get your desired effect without applying a transparent border to the non-hover state li a elements.

Related

How to animate border using vanilla javascript or css

I set border-bottom color to grey and add transiton to .3s, and ':hover' effect,so on hover it changes its color to blue. Problem is related with that: when I place my mouse over the element with hover effect the border i set(blue) emerges from top to bottom(falling effect).
this is it
Now my client wants border to emerge from left to right on hover and border shouldn't fade away on hover on another list item,it(border) have to 'lag behind' the cursor trying to 'catch on' the cursor and fill the next list item's border positon. I hope I you get what I want. I know that it's not possible to do in css,but i don't know how to do this in js,can someone help me with that and expalain to me what to do,without using any frameworks like jQuery.
You can animate by using the width property as Thusitha said.
Here I have attached the codepen link for that effect.
ul {
list-style-type: none;
border-bottom: 5px solid #eee;
}
ul li {
display: inline-block;
position: relative;
padding: 20px;
}
ul li:before {
content: "";
position: absolute;
height: 5px;
width: 0px;
bottom: -5px;
left: 0;
background: blue;
transition: all linear 0.25s;
}
/* Expanding Animation Element */
ul li:hover:before {
width: 100%
}
<div class="box">
<ul>
<li>Homepage</li>
<li>Style Demo</li>
</ul>
</div>

Left and Right in a li to have a border

I have a li that gets generated dynamically and I want the left li and the right li to have a border. I was thinking of adding a classes to them. The li that has class "hidden" doesnt get displayed. The list might be like this
<li class="show">First</li>
<li class="hidden">Second</li>
<li class="hidden">Third</li>
<li class="show">Fourth</li>
Or
<li class="hidden">First</li>
<li class="hidden">Second</li>
<li class="show">Third</li>
<li class="show">Fourth</li>
No matter what how they are stacked, the first list should have a border on the left and last list should have border on the right.
JSFIDDLE
Use:
$('ul').each(function() {
$(this).find("li.show:first").addClass('first');
$(this).find("li.show:last").addClass('last');
});
Working Demo
You can also put the border radius on the ul instead of using any js at all
http://jsfiddle.net/403tLzn9/6/
.stackbar {
border-top-right-radius: 5px !important;
border-bottom-right-radius: 3px !important;
border-top-left-radius: 5px !important;
border-bottom-left-radius: 3px !important;
background-color: #cD3e25;
display: inline-block;
padding: 0;
margin: 0;
overflow: hidden;
}
Also your js doesn't work is because you are trying to find the li inside of your li

CSS add a fat "frame" around an IMG without changing IMG positioning

I have rows of thumbnails in a <div> with only a small margin/border/padding set. I'd like to add a 'focus' class to highlight one thumbnail on the page during a CSS transition, i.e. 'div.thumb.focus'
Is there any easy CSS Trick to wrap a frame around the 'div.thumb' WITHOUT re-positioning the div.thumb in the page?
The div.thumbs are all absolutely positioned within a container. And I want the frame to be THICKER than the margin/padding between div.thumb. It can live on a higher z-index, and partially cover neighboring thumbs, as long as the click events read the div.thumb.focus. An easy JQuery solution is acceptable.
// using LESS syntax
.container {
position: relative;
.thumb {
&.focus {
<need help here>
}
top: #top;
left: #left;
position: absolute;
margin: #margin;
padding: #padding;
img {
width: #width;
height: #height;
}
}
}
A few solutions come to mind (not Bootstrap specific):
Using a better box model, but it may affect your padding:
box-sizing: border-box
border: 10px solid red
Or using an hard inset shadow that'll look like a border:
box-shadow: inset 0 0 0 10px red
You could use an outline but it would overflow outside the box without affecting its dimensions:
outline: 10px solid red
Now, I'm not too familiar with LESS, so I've just done this in regular CSS.
There are a few options you could choose.
Add a Negative Margin
.thumb.focus{
margin-top: -4px;
margin-left: -4px;
border: 4px solid blue;
}
This may not be suitable for your case, however, as you already have a margin set. It may be useful for others though.
Add a Shadow
.thumb.focus{
box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}
This could work well, but not if you want multiple colours/thicknesses on some sides.
Use box-sizing
.thumb.focus{
box-sizing: border-box;
border: 4px solid blue;
}
The main problem with this would be browser support.
Use Outline
.thumb.focus{
outline: 4px solid blue;
}
This has a similar issue to the box shadow I believe.

Add spacing to Twitter Bootstrap submenu

I am trying to add some spacing to the left of the Twitter Bootstrap submenu so there is a bit of spacing between the 2nd and 3rd level menus. So, I've used the following added CSS:
.dropdown-submenu > .dropdown-menu {
margin: -1px 0 0 5px;
}
But, when the user moves the mouse over the gap, the submenu disappears (go slow). How can I add the space and keep the menu showing while mousing over to it?
Here's a fiddle:
http://jsfiddle.net/trxk8/5/
This isn't really the prettiest of solutions but you could pad out the .dropdown-submenu elements with a transparent 5px border.
A side effect of this would be that you would also have to trim down the child anchor tag a little bit:
CSS
.dropdown-submenu {
border-right: transparent block 5px;
margin-right: -5px;
}
.dropdown-submenu > a {
position: relative;
right: 5px;
margin-left: 5px;
}
Working example: http://jsfiddle.net/trxk8/8/
Note, you would still be keeping margin-top: -1px in .dropdown-submenu > .dropdown-menu

How to have a fixed width/height image always centered in a div?

I am looking for a way to have an image dynamically centered on any div size. How is this possible?
I have posted a jsFiddle for better understanding here http://jsfiddle.net/4exmm/ but as I said the div size is changed using a PHP script.
Vertically and horizontally aligned:
http://jsfiddle.net/4exmm/2/
Make your div text-align: center. http://jsfiddle.net/4exmm/1/
#image {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E1E1E1;
float: left;
margin-right: 10px;
padding: 3px;
width: 300px;
text-align:center;
}
Just add this rule to #image:
text-align:center;
Why not just text-align: center on the div
you could also make your img margin: 0 auto to keep it aligned withing whatever object

Categories