Overlap 2 div borders

I have this setup at the moment. I would like it so that when you hover over a box the bottom border changes to the same colour as inside the hovered div. I am starting to think this cannot be done with just css, but how would you add javascript to do this?

Any guidance would be appreciated

http://jsfiddle.net/hCK3D/7/

Answers


Overlap div container border with item border on hover

Unlike the other answers posted, this solution will allow you to keep the border line on the bottom: http://jsfiddle.net/hCK3D/15/ and your white vertical lines will continue to appear correctly.

The idea is that the border from the bottom is now set in the item, and when the item is hovered the bottom border changes colour to match the hover colour. Also the container border is set for the purpose of the white vertical lines, but on hover the item hover border bottom appears in front of the container border.

See the JSFiddle for source


Why don't you just remove the bottom-border on hover and instead make the element 1px bigger in height? (You do not need to add any JavaScript codes)

Like this: http://jsfiddle.net/hCK3D/17/

UPDATE: Now also the border is not disrupted..

UPDATED CSS:

.item-container {
    float:left;
    margin-top:20px;
    border-bottom: 1px #BCC0C3 solid;
    height:100px;
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border-left: 1px #fff solid;
    border-top: 1px #BCC0C3 solid;
    border-bottom: 1px #BCC0C3 solid;
    box-sizing: border-box;
}
.item:first-child {
    border-left: 1px #BCC0C3 solid;
}
.item:last-child {
    border-right: 1px #BCC0C3 solid;
}
.item:hover {
    background:#ECEFF4;
    border-left:1px #BDC0C5 solid;
    border-right:1px #BDC0C5 solid;
    border-bottom: 0;
    height:101px;
}
.item:hover + .item {
    border-left-width: 0;
}

do you mean like this?

jsfiddle

.body{background:#ECEFF4;}
.item-container {
    float:left;
    border-top: 1px solid #BCC0C3;
    margin-top:20px;
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border-left: 1px solid #fff ;
    border-bottom: 1px solid #BCC0C3;
}

.item:first-child {border-left: 1px solid #BCC0C3;}
.item:last-child {border-right: 1px solid #BCC0C3;}

.item:hover {
    background:#ECEFF4;
    border-left:1px solid #BDC0C5;
    border-right:1px solid #BDC0C5;
    border-bottom: 1px solid #ECEFF4;
}

.item:hover + .item {border-left-width: 0;}

Need Your Help

Storing Date with timezone

database oracle date datetime timezone

I have been working with oracle DB for a long time and have been storing dates without bothering about timezone.

Android video live streaming

android video-streaming http-live-streaming live-streaming http-streaming

I am in big trouble, I could not play m3u8 file in my android videoview but it is so easy in iPhone. I googled and visited several forums and all are saying that it is not possible. But I tried

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.