CODEWITHSUNDEEP
htmlcss
Pedro
Pedro

Reputation: 1450

How to make hover use border-radius first-child

I am working on a small website and I have a menu with the border-radius set to 10px. I am having problem on how to make the hover use the border-radius only on the first and last child. Can somebody explain me what am I doing wrong? 

<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

CSS:

.menu ul
{
    background: #ede0b3;
    width: 200px;
    box-shadow: 1px 1px 1px 1px grey;
    border-radius: 10px; 
    margin-left: 5px;
} 

.menu ul li
{
    list-style: none;
    border-bottom: 1px solid grey;
}

.menu ul li a
{
    padding: 10px 15px;
    display: block;
    color: black;
    font-weight: bold;
    text-decoration: none; 
}

.menu ul li:last-child
{
    border-bottom: none;

}

.menu ul li a:hover
{
    background: white; 
}

.menu li a:first-child:hover
{
    border-radius: 10px;
}

Demo: https://jsfiddle.net/vaydrvcr/

Upvotes: 1

Views: 1591

Answers (5)

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

Here you go:

.menu ul {
  background: #ede0b3;
  width: 200px;
  box-shadow: 1px 1px 1px 1px grey;
  border-radius: 10px;
  margin-left: 5px;
  padding-left: 0;
}
.menu ul li {
  list-style: none;
  border-bottom: 1px solid grey;
}
.menu ul li a {
  padding: 10px 15px;
  display: block;
  color: black;
  font-weight: bold;
  text-decoration: none;
}
.menu ul li:last-child {
  border-bottom: none;
  border-top-left-radius: 0;
}
.menu ul li a:hover {
  background: white;
}
.menu li:first-child:hover a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu li:last-child:hover a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
<div class="menu">
  <ul>
    <li><a href="#">Link 1 </a>
    </li>
    <li><a href="#">Link 2 </a>
    </li>
    <li><a href="#">Link 3 </a>
    </li>
    <li><a href="#">Link 4 </a>
    </li>
    <li><a href="#">Link 5 </a>
    </li>
  </ul>
</div>

First I added padding-left: 0; to the .menu ul selector and then replaced your last style .menu li a:first-child:hover with following to only add top-left & top-right border for the first menu item and bottom-left & bottom-right border for last item:

.menu li:first-child:hover a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu li:last-child:hover a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Upvotes: 1

Abhishek
Abhishek

Reputation: 315

The problem you are facing is because you have border-radius property to li a:first-child , since each li tag have single a element that's why it affects your whole a element.

CSS

 .menu li:first-child:hover a
 {
    border-radius:10px;
 }


Hope this will resolve your problem.. https://jsfiddle.net/xdn80b9f/1/

Upvotes: 1

user6659294
user6659294

Reputation:

Use This method 

.menu ul
{
	background: #ccc;
	width: 200px;
	box-shadow: 1px 1px 1px 1px grey;
	border-radius: 10px; 
	margin-left: 5px;
} 

.menu ul li
{
	list-style: none;
	border-bottom: 1px solid grey;
}

.menu ul li a
{
	padding: 10px 15px;
	display: block;
	color: black;
	font-weight: bold;
	text-decoration: none; 
}

.menu ul li:last-child
{
	border-bottom: none;

}

.menu li:first-child a:hover{
	border-radius: 10px;
  background:#fff;
}

.menu li:last-child a:hover{
	border-radius: 10px;
  background:#fff;
}
<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

Blockquote

Upvotes: 2

frnt
frnt

Reputation: 8795

Try this, You have to target your li element instead of a tag.

.menu ul
{
	background: #ede0b3;
	width: 200px;
	box-shadow: 1px 1px 1px 1px grey;
	border-radius: 10px; 
	margin-left: 5px;
} 

.menu ul li
{
	list-style: none;
	border-bottom: 1px solid grey;
}

.menu ul li a
{
	padding: 10px 15px;
	display: block;
	color: black;
	font-weight: bold;
	text-decoration: none; 
}

.menu ul li:last-child
{
	border-bottom: none;

}

.menu li:first-child a:hover{
	border-radius: 10px;
  background:#fff;
}

.menu li:last-child a:hover{
	border-radius: 10px;
  background:#fff;
}
<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

Upvotes: 1

ankitjain11
ankitjain11

Reputation: 253

Here, is the updated fiddle. https://jsfiddle.net/vaydrvcr/1/

You were correct, just you missed that a is always the first child of li. You were to target anchor of first li.

Upvotes: 1

Related Questions