CODEWITHSUNDEEP
htmlcss
MichaelJorgensen5000
MichaelJorgensen5000

Reputation: 47

How do I make a hover effect that affects the next sibling element as well?

How can I make this hover effect with CSS and HTML?:

Normal view:

---------
Link-1
---------
Link-2
---------
Link-3
---------

When I hover Link-1, the top and bottom line change color, something like this:

=========
Link-1
=========
Link-2
---------
Link-3
---------

And if I hover Link-2 these 2 lines change:

---------
Link-1
=========
Link-2
=========
Link-3
---------

And so on...

The "====" is just indicating the change of color, not double lines
I am actually pretty lost on this one, but this is what i got so far:

<div id="nav">

                <a href="#" class="dummy">Link-1</a>
                <a href="#" class="dummy">Link-2</a>
                <a href="#" class="dummy">Link-3</a>

</div>

And the CSS:

#nav{
    width: 200px;
    height: 700px;
    background-color: red;
}
#nav a{
    display: block;
    width: 190px;
    text-decoration: none;
    padding-left: 10px;
    padding-top: 3px;
    margin-bottom: 5px;
    border-top: 1px solid #d5d5d5;
}
#nav a:hover  {
    color: white;
    font-weight: bold;
    border-top: 1px solid white;
}

Upvotes: 1

Views: 1830

Answers (4)

Quinn Strahl
Quinn Strahl

Reputation: 1818

This is the best way I can think of doing it in pure CSS.

HTML

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
</ul>

CSS

li
{
    padding: 10px;
    border-color: #000;
    border-top: 1px solid;
}

li:last-child
{
    border-bottom: 1px solid;
}

li:hover
{
    border-color: #f00;
}

li:hover + li
{
    border-top-color: #f00;
}

Basically, each element in the list of hoverable elements gets a border-top. The last element gets both a border-top and a border-bottom. When you hover over an element, you change its border-color and the border-top-color of the element directly after it.

The benefit of this method over some others is that it doesn't require hacking your HTML to make the borders show up the way you want. The disadvantage is that IE8 does not support :last-child.

Upvotes: 5

xec
xec

Reputation: 18034

It really depends how you have created the lines. If they are top borders of DIVs (guessing by your title) you could try something like this;

div:hover {
    border-color: blue;
}
div:hover + div { /* the div following the hovered div */
    border-color: blue;
}

Demo at http://jsfiddle.net/frw2n/

Upvotes: 4

Manish Mishra
Manish Mishra

Reputation: 12375

try this:

markup:

<a href='#'>link1 </a>
<a href='#'>link2 </a>
<a href='#'>link3 </a>

CSS:

a
{
    padding:20px;
    width:100px;
    border:1px Solid #CCC;
}
a:hover
{
    border:1px Solid Red;
}

see this fiddle

Upvotes: 0

Phillip-juan
Phillip-juan

Reputation: 546

For the top and bottom borders, you can try putting the links in a div and give all these divs the same class name and style that class like so:

.classname:hover
{
    border-top:1px dotted blue;
    border-bottom:1px dotted blue;
}

If I understand you correctly...

Hope this is helpful

Upvotes: 0

Related Questions