javascript - Highlighting an element in the menu by manipulating the opacity -

html:

<div id="menu" class="menu">     <ul class="headlines">         <li id="item1" onclick="checklist(this)">             <button onclick="myfunction()">g</button>         </li>         <li id="item2">             <button onclick="myfunction2()">a </button>         </li>         <li id="item3">b </li>         <li id="item4">c </li>         <li id="item5">d </li>         <li id="item6">e </li>         <li id="item7">f </li>     </ul> </div> 

css:

lu, li {     list-style-type: none;     font-size: 1.5em;     height: 40px;     width: 150px;     text-align: right;     border-style: none; }  .menu {     width: 150px;     height: 350px; }  .menu li {     position: relative;     top: 150px;     bottom: 0;     left: 725px;     right: 0;     margin: auto;     border-style: none; }  .permahover li {     opacity: 1;     left: 10%; }  .headlines li {     font-size: 1.5em;     color: #000000;     transition: 0.5s;     cursor: pointer; }  .headlines:hover li {     /* parent hover */     opacity: 0.4;     cursor: pointer;     /* dim */ }  .headlines li:hover {     /* single hover */     opacity: 1;     /* max 1 */     color: #000000;     cursor: pointer; } 

in current code when user hover on element, other elements in menu reduce in opacity. how can same procedure after clicking element.. clicking element it'll keep opacity unclicked elements reduce in opacity, highlighting selected element.

you need javascript this*. example:

var $li = $('.headlines li').click(function() {      var state = !$(this).hasclass('active');      $(this).parent().toggleclass('active', state);            $li.removeclass('active');      $(this).toggleclass('active', state);  });

ul, li {      list-style-type: none;      font-size: 1.5em;      height: 40px;      width: 150px;      text-align: right;      border-style: none;  }  .menu {      width:150px;      height: 350px;  }  .menu li {      position: relative;      right: 0;      margin: auto;      border-style:none;  }  .permahover li {      opacity: 1;      left: 10%;  }  .headlines li {      font-size:1.5em;      color:#000000;      transition: 0.5s;      cursor: pointer;  }  .headlines:hover li,  .headlines.active li {      opacity:0.4;      cursor: pointer;  }  .headlines li:hover,  .headlines li.active {      opacity: 1;      color:#000000;      cursor: pointer;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="menu" class="menu">      <ul class="headlines">          <li id="item1" onclick="checklist(this)">              <button onclick="myfunction()">g</button>          </li>          <li id="item2">              <button onclick="myfunction2()">a</button>          </li>          <li id="item3">b</li>          <li id="item4">c</li>          <li id="item5">d</li>      </ul>  </div>

---

_{* technically it's possible pure css, html structure become complex , not semantic.}