CODEWITHSUNDEEP
javascriptcss
tsohtan
tsohtan

Reputation: 850

How to avoid the div 'move' when mouse hover?

I like to highlight each box when mouse hover, i'm able to show the effect but the thing is when i hover it the box seem like move/expand a bit to right. So how do i avoid this? enter image description here

How do i avoid this?

html

    <div id="divtargetDay_1__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_2__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_3__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_4__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_5__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_6__Assigned" class=" divday divfloatpointerleft"></div>

css

.divborderhighlight {
   border:1px solid red;
}

.divfloatpointerleft {
    cursor:pointer;
    float:left;
}

.divday {
    width: 56px !important;    
    height: 56px !important; 
    margin-right:4px;   
}

JS

function dayHover(index) {
        labels[index].hover(function () {
            $(this).addClass('divborderhighlight');
        }, function () {
            $(this).removeClass('divborderhighlight');
        });
    }

Upvotes: 0

Views: 439

Answers (4)

Andrea Ligios
Andrea Ligios

Reputation: 50281

Use CSS to specify the hover behavior: 

divday:hover  {
   border:1px solid red;
}

Then use outline instead of border:

.divday:hover  {
   outline:1px solid red;
}

Another solution is to use a transparent border in the default state, solidifying / colouring it in hover state.

.divday  {
   border:1px solid transparent;
}
.divday:hover  {
   border:1px solid red;
}

Running Demo

Upvotes: 2

Patrick Evans
Patrick Evans

Reputation: 42746

use outline instead of border: 

.divborderhighlight {
   outline:1px solid red;
}

outline doc

Outlines do not take up space.

http://jsfiddle.net/XCtQB/

Upvotes: 3

Adelmar
Adelmar

Reputation: 2101

The problem is this:

.divborderhighlight {
   border: 1px solid red;
}

When this is added to a div without a border, it increases its total width by 2px (1px for the border on each side)

There are a few solutions. One is to add a transparent border to every non-highlighted div like so:

.divfloatpointerleft {
    cursor: pointer;
    float: left;
    border: 1px solid transparent;
}

Now when the red border is added, it doesn't add any width, because the width was already there in the form of a transparent border. This solution is ideal for when you want to add your highlight while preserving the original content without any overlay.

Another solution is to use the outline property instead of border on mouseover:

.divborderhighlight {
   outline: 1px solid red;
}

This works just like the border property but as an overlay that adds no width or height to the element. The downside to this is that it conceals 1px along the perimeter of the element.

Upvotes: 3

Guillaume Lhz
Guillaume Lhz

Reputation: 904

add a transparent border :

.divday {
    width: 56px !important;    
    height: 56px !important; 
    margin-right:4px;   
    border: 1px solid transparent;
}

Upvotes: 0

Related Questions