Geek Answers Handbook

On `hover` - how to handle border-radius for children in a different scenario?

I have a parent with children of a . when the mouse over user changes the color of the frame for children to red. it works.

My problem is that the length of the child is not static. he is dynamic. I add the left border of radius both first and last , but how to add right-radius to second and last ? (since I do not know the number of children)

 .parent { border:5px solid red; display:inline-block; position: relative; border-radius:5px; box-sizing:border-box; margin-bottom:3em; } .parent a { display:block; padding:1em; border-bottom:1px solid #ddd; position: relative; width:50%; float:left; box-sizing:border-box; } .parent a:nth-child(odd):hover{ border:5px solid #ddd; margin: -5px; } .parent a:nth-child(even):hover{ border:5px solid #ddd; margin: -5px; left:10px; } .parent a:first-of-type{ border-top-left-radius:5px; } .parent a:last-of-type{ border-bottom-left-radius:5px; } 
 <div class="parent"> <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a> </div> <div class="parent"> <a href="#">1</a><a href="#">2</a><a href="#">3</a> </div> <div class="parent"> <a href="#">1</a> </div>

or what is the right way to handle this?

+5
source share
3 answers

You can use the following and all your cases should be sorted:

 .parent { border:5px solid red; display:inline-block; position: relative; border-radius:5px; box-sizing:border-box; margin-bottom:3em; } .parent a { display:block; padding:1em; border-bottom:1px solid #ddd; position: relative; width:50%; float:left; box-sizing:border-box; } .parent a:nth-child(odd):hover{ border:5px solid #ddd; margin: -5px; } .parent a:nth-child(even):hover{ border:5px solid #ddd; margin: -5px; left:10px; } .parent a:first-of-type{ border-top-left-radius:5px; } .parent a:nth-child(2) { /* second child */ border-top-right-radius:5px; } .parent a:last-of-type:nth-child(even){ border-bottom-right-radius:5px; } .parent a:last-of-type:nth-child(odd){ border-bottom-left-radius:5px; } .parent a:nth-last-child(2):nth-child(odd) { border-bottom-left-radius: 5px; }

Here is jsfiddle: https://jsfiddle.net/67hr0oax/4

Here is the jerkiness removal update: https://jsfiddle.net/67hr0oax/7/

Please note: browser support is only for IE9 and above.

+2
source

As long as you save the number of elements, even adding <a>&nbsp;</a> , this will work.

Although there were some slots on the outer border to stop, but they are there to stop the entire block jumping when you mouse over.

 .parent, .parent a { position: relative } .parent { display: inline-block } .parent a { display: block; padding: 1em; width: 50%; float: left; box-sizing: border-box; border: 5px solid transparent; background: #fff } .parent a:nth-child(1) { border-top-left-radius: 5px; border-top: solid red 5px } .parent a:nth-child(2) { border-top-right-radius: 5px; border-top: solid red 5px } .parent a:nth-child(even) { border-right: solid red 5px } .parent a:nth-child(odd) { border-left: solid red 5px } .parent a:last-child { border-bottom-right-radius: 5px; border-bottom: solid red 5px } .parent a:nth-last-child(2) { border-bottom-left-radius: 5px; border-bottom: solid red 5px } .single a { border-radius: 5px; border: 5px solid red } .parent a:hover { border-color: #00f } 
 <div class="parent"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a>&nbsp;</a> </div> <div class="parent"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a>&nbsp;</a> </div> <div class="single parent"> <a href="#">1</a> </div>
+1
source

When you say that the number of elements in your string is “dynamic”, I don’t think CSS is designed to handle this kind of complexity.

If you keep the number of static elements, perhaps we could use a combination :nth-last-child() :nth-child() to apply the border radius.

Thus, it seems that your possibilities are limited to processing with javascript.

0
source

More articles:


All Articles