Geek Answers Handbook

Sass parent selector and freeze?

Is it possible to run the parent class on hover? I know this can be done using jquery, but I want to make a clean css solution.

My code is:

.navbar-form{ padding-left: 55px; .input-group{ width: 200px; .form-control{ border-right: none; width: 350px; &:hover & { border-color: blue; } } .input-group-addon{ background-color: white; border-left: none; } } }

FIDDLE: http://jsfiddle.net/fcKyc/

Looking at the fact that when I focus on input , .input-group-addon will do something. input and the icon are children of the input group.

+7
css sass
source share
2 answers

If I understand this correctly, here is my interpretation of the DOM interaction that you are describing.

.parent

  • .child1

  • .child2

Pointing at .child1 affects .child2

If yes, then here:

 .form-control { ... //your CSS for this input { //CSS for input &:hover ~ .input-group-addon { //CSS for .input-group-addon when input is hovered } } }

OR, if .input-group-addon is immediately after input (an adjacent sibling), you can use the following:

 .form-control { ... //your CSS for this input { //CSS for input &:hover + .input-group-addon { //CSS for .input-group-addon when input is hovered } } }

As @ Martin suggested.

+9
source share

I think you are looking for something like this:

 <style type="text/css"> .navbar { background: #000; &:hover .change{ background: #ccc; } } </style> <div class="navbar"> <div class="change"> </div> </div>

If you hover over the navigation bar, div.change will change colors. This is what I usually use instead of using jQuery for certain effect triggers.

+1
source share

More articles:


All Articles