Menu item hover into
border;

Question

How do I draw a border over my section while mouse is over any navigation element <a> etc ? I were trying to find solution but none of + . ~ work for me.

<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">BAC</a></li>
        <li><a href="#">CAD</a></li>
        <li><a href="#">EEE</a></li>
        <li class="image">
          <a href="index.html"><img src="img/logo.png"></a>
        </li>
      </ul>
    </nav>
  </header>
  <section class="content">
    CONTENT
  </section>
</div>

Could someone share some css code to do this? That would be awesome !

Solution : Use jQuery

$(document).ready(function(){
    $(function() {
            $('li').hover(function() {
                $('.content').css('outline', 'solid 5px');
        }, function() {
            $('.content').css('outline', '');
      });
    });
});

Thats my script, but you can find alternative @below

score 0 · Accepted Answer · edited May 23 '17 at 12:31

You'll have to use javascript for this. Css can only do it if the section is a decendent of the anchor tag or is a sibling. See here for the explaination.

I used some jquery to do what you need. Tweak it as you like.

$(function(){
  //On hover of nav anchor add red border
  $('nav a').hover(function(){
    $('.content').css('border', '1px solid red');
  });
  
  //Clear the css we added
  $('nav a').mouseout(function(){
   $('.content').css('border', '');
  })
});

#test:hover + .content {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header>
    <nav>
      These will only work with some javascript/jquery.
      <ul>
        <li><a href="#">BAC</a></li>
        <li><a href="#">CAD</a></li>
        <li><a href="#">EEE</a></li>
        <li class="image">
          <a href="index.html"><img src="img/logo.png"></a>
        </li>
      </ul>
    </nav>
  </header>
  <!-- This works with css. + . ~ only work if the tags are siblings, decendents etc -->
  <a href="#" id="test">This works with css because it's a sibling</a>
  <section class="content">
    CONTENT
  </section>
</div>

Thats the solution. Thanks you sir. – robertbie Mar 11 '17 at 00:03 — robertbie, Mar 11 '17 at 00:03

score 0 · Answer 2 · edited May 23 '17 at 12:25

How do I draw a border over my section while mouse is over any navigation element etc ? I were trying to find solution but none of + . ~ work for me.

With current CSS you can only select to the right or downward, but not to the left or upwards in the DOM. (See also: Is there a CSS parent selector?)

Both + and ~ work based on a sibling relationship between elements. So this can only work, if you want it to react on hovering the whole header element, because the section is a sibling of only that element.

header:hover + section {
  outline:5px solid;
}

/* optional: */
/*
header {
  display:inline-block;
}
*/

<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">BAC</a></li>
        <li><a href="#">CAD</a></li>
        <li><a href="#">EEE</a></li>
        <li class="image">
          <a href="index.html"><img src="img/logo.png"></a>
        </li>
      </ul>
    </nav>
  </header>
  <section class="content">
    CONTENT
  </section>
</div>

If you want to limit the area that triggers the effect, you can make the header inline-block - then most of the space to the right of the items won't react to the mouse cursor. To fine-tune the effect to the desired boundaries, you can play with the margins and padding of the elements involved.

Thanks for that. You just proved that it was still "do-able?" without jQuery. Have a nice day/night :) — robertbie, Mar 11 '17 at 00:52

score -1 · Answer 3 · answered Mar 10 '17 at 23:18

-1

Target the section after the hover.

nav li:hover section {
border: 1px solid black;
}

answered Mar 10 '17 at 23:18

Landon Call

640
2
7
27

Thats not the solution, i've already tried it and it doesnt work. – robertbie Mar 10 '17 at 23:21

Menu item hover into border;

3 Answers3

Menu item hover into
border;