How to highlight all divs and add a kind of navigation to each

Question

I am looking for a way to highlight a div if a there is a click or mouseover. Highlighting for example change or add border color by javascript on click or on mouseover is clear.

Now I think about adding a kind of navbar to the div (see the image), here I miss a idea how it's possible.

How can i cann this kind of navbar to every image, wich functionally only fo this div?

For example a kind like this:

This functionality should be add to every div on website...

Hope for ideas / tips from you

Van · Accepted Answer · 2019-01-10T03:39:56.360

You should apply a different css styling on hover for the element. To give you a better understanding checkout the snippet below.

Updated 20190110 Addded show toolbar on button hover.

.button-container {
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  background-color: #f4f4f4;
  border: 1px solid #666;
  cursor: pointer;
  margin: 80px 0px 0px 40px;
}


/* this styling will be applied when the element is hovered */

.button-container:hover {
  /* add styling here for when it's hovered, i.e. */
  /* change the background and color */
  /* background-color: #666; */
  /* color: #fff; */
  /* or change the border color */
  border-color: #0095ff;
}


/* set the toolbar position to absolute on top of the button */

.toolbar-container {
  display: none;
  position: absolute;
  min-width: 120px;
  top: -23px;
  right: -1px;
  background-color: #0095ff;
  padding: 2px 3px 0px 3px;
}


/* toolbar item styling */
.toolbar-item {
  display: inline-block;
  padding: 0px 5px;
  color: #eee;
  transition: all 0.1s;
  cursor: pointer;
}

.toolbar-item .material-icons {
  font-size: 17px !important;
}

.toolbar-item:hover {
  color: #fff;
}


/* show the toolbar on hover */

.button-container:hover>.toolbar-container {
  display: inline-block;
}

<!-- for the toolbar icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="button-container">
  <div class="button-el">hover me!</div>
  <!-- toolbar container -->
  <div class="toolbar-container">
    <div class="toolbar-item"><i class="material-icons">edit</i></div>
    <div class="toolbar-item"><i class="material-icons">zoom_out_map</i></div>
    <div class="toolbar-item"><i class="material-icons">crop_rotate</i></div>
    <div class="toolbar-item"><i class="material-icons">delete</i></div>
  </div>
</div>

yes, thanks a lot - have you a idear about the additional navbar thats my mainquestion — RainerS, Jan 09 '19 at 04:37
@RainerS yes, the navbar can be configured through css styling and html element too, let me update the answer — Van, Jan 10 '19 at 03:14
Hi, is there a way to use the navbar in a dynamic way for each div on a site? — RainerS, Jan 17 '19 at 12:10

score 0 · Answer 2 · answered Jan 09 '19 at 04:38

0

For border on hover-

<div id="s">home</div>

$("#s").hover(()=>{
$("#s").css({"border-width":"10px","border-color":"yellow","border-style": "solid"})
},()=>{$("#s").css({"border-style": "none"})})

Check fiddle

For the div you can refer this answer.

answered Jan 09 '19 at 04:38

ellipsis

12,049
2
17
33

score -2 · Answer 3 · answered Jan 09 '19 at 04:45

Try this:

$(".menu-item").hover(function(){
$(".options").show();

},function(){
$(".options").hide();
});

.wrapper{
  width:100px;
  position: relative;
  padding-top: 20px;
}

.menu-item{
 border: 1px solid black;
 background: skyblue;
}
.options{
 width: 150px;
 border: 1px solid black;
 background: green;
 position: absolute;
 top: 0;
 left: 0;
 display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="options">
    This is an option
  </div>
  <div class="menu-item">
    Hover
  </div>
</div>

How to highlight all divs and add a kind of navigation to each

3 Answers3