CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 29079

Overlay border-top on vertical navigation

I have this vertical navigation (Here is the jFiddle)

<style>
ul{
  list-style-type: none;
}

li{
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
}
</style>

<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

A hovered li should be pure blue without any dashed lines on it. Thus, I want that on a hovered li the surrounding dashed border to be solid. It is no problem to change border-top of the hovered li to solid, but I don't know how to change the border-top of the next li element.

I am looking for a simple solution without javaScript.

In short, I would like to get on a hover this: enter image description here

instead of (what I am currently getting) this:

enter image description here

One solution that came to my mind was to set border-top and border-bot of each li as dashed and on hover to solid. But then, the blue hovered li would be surrounded by 2 dashed lines, so this idea does not work.

Are there any good solutions for this?

Upvotes: 2

Views: 76

Answers (4)

tobishills12
tobishills12

Reputation: 1

Wow! I am new here but i will like to contribute my twopence to your question:

This are my solution which i think may be of help:

Do you know anything about the CSS "nth-child" selector which can help you in customizing your block elements in way which suites you? for instance you can try this:

  p:nth-child(odd) {
    color: green;
  }
<html>

<head>
</head>

<body>
  <p>use the nth child</p>
  <!...odd 1...>
  <p>use the nth child</p>
  <!...even 2...>
  <p>use the nth child</p>
  <!...odd 3...>
  <p>use the nth child</p>
  <!...even 4...>
  <p>use the nth child</p>
  <!...odd 5...>
  <p>use the nth child</p>
  <!...even 6...>
</body>
<html>

This will change those odd block elements to green.

I guess with you knowledge in html you can use this example for your list items background and hover background.

Other values can be the consecutive numbers you want the style to apply to.

Thanks!

Upvotes: -1

jayms
jayms

Reputation: 4018

I vote for ochi's answer, but I would like to point out another solution based on outline:

ul{
  list-style-type: none;
}

li{
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
  outline:1px solid #08C;
}
<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

Outline just overpaints the border.

Similarly box-shadow: 0px 1px 0px 0px #08C; does not overpaint but shine through between the dots of the dotted border.

Upvotes: 1

blurfus
blurfus

Reputation: 14031

Try modifying the next sibling, like this

li:hover + li {
  border: solid 1px #08C;
}

See Updated fiddle

Updated based on comments

ul {
  list-style-type: none;
}
li {
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}
li:hover {
  background-color: #08C;
}
li:hover + li {
  border-top: solid 1px #08C;
}
<ul>
  <li>Abc</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
</ul>

Upvotes: 4

APAD1
APAD1

Reputation: 13666

You could give each li a negative margin-top so that the hover background will cover the border:

ul{
  list-style-type: none;
}

li{
  display: block;
  margin:-1px 0 0 0;
  padding: 10px;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
}
<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

Upvotes: 4

Related Questions