title: How to activate and deactivate css classes of an element while hovering over a different element?
body: <p>Okay. So what I'm trying to create is <a href="https://i.imgur.com/x0keXY1.png" rel="nofollow noreferrer">http://i.imgur.com/x0keXY1.png</a></p>
  
  <p>Each of the OL items has a description that matches it. The position of the descriptions is fixed. </p>
  
  <p>What I'm trying to achieve is that when I hover the mouse over list item 1, it should display the description related to item 1. 
  When I hover over item 2, the description of item 1 is replaced with the description of item 2.</p>
  
  <p>Here's my HTML: </p>
  
  <pre><code>&lt;div class="home-disciplines" &gt;
  
  &lt;article class="home-disciplines__text home-disciplines__text_name_frontdesk home-copy hidden-phone home-disciplines__text_active"&gt; 
      &lt;h2 class="home-copy__title"&gt;Front Desk Use&lt;/h2&gt;
      &lt;p class="home-copy__txt"&gt;Guest facing users can&amp;nbsp;easily check and monitor updates on room status or guest requests. What is more, phone call usage is optimised since everything gets done within the helius app. &lt;/p&gt;
  &lt;/article&gt;
  
  &lt;article class="home-disciplines__text home-disciplines__text_name_repo home-copy hidden-phone"&gt; 
      &lt;h2 class="home-copy__title"&gt;Information Repository For Equipment&lt;/h2&gt;
      &lt;p class="home-copy__txt"&gt;Equipment related information available one click away (Warranty, vendor, repairment). From basic tracking all the way to future maintenance operations &lt;/p&gt;
  &lt;/article&gt;
  
  &lt;article class="home-disciplines__text home-disciplines__text_name_worksheets home-copy hidden-phone"&gt; 
      &lt;h2 class="home-copy__title"&gt;Worksheets&lt;/h2&gt;
      &lt;p class="home-copy__txt"&gt; Staff members fill out their worksheets as they conduct routine jobs. It's worth mentioning that as soon as an unwanted answer is marked, an issue report is auto created.&lt;/p&gt;
  &lt;/article&gt;
  
  &lt;section class="home-disciplines__menu"&gt;
  
      &lt;h3 class="home-disciplines__title j-fadeslidein-trigger j-visible" data-start-pos="3"&gt;Features&lt;/h3&gt;
      &lt;ol class="home-disciplines__list"&gt;
  
          &lt;li class="home-disciplines__list-itm j-fadeslidein-trigger j-visible home-disciplines__list-itm_active" data-start-pos="3" data-target="frontdesk"&gt;  Front Desk Use &lt;/li&gt;
  
          &lt;li class="home-disciplines__list-itm j-fadeslidein-trigger j-visible" data-start-pos="3" data-target="repo"&gt;  Information Repository for Equipment &lt;/li&gt;
  
          &lt;li class="home-disciplines__list-itm j-fadeslidein-trigger j-visible" data-start-pos="3" data-target="worksheets"&gt;  Worksheets &lt;/li&gt;
  
          &lt;li class="home-disciplines__list-itm j-fadeslidein-trigger j-visible" data-start-pos="3" data-target="assignment"&gt;  Job Assignment &lt;/li&gt;
  </code></pre>
  
  <p>I've set up a new css properties for 2 classes home-disciplines__text_active and home-discplines__list-itm_active which have an opacity of 1 and a higher z-index.</p>
  
  <p>I'm using toggleclass method </p>
  
  <pre><code>$('.home-disciplines__list-itm').hover(
     function(){ $(this).toggleClass('home-disciplines__list-itm_active'); }
  </code></pre>
  
  <p>);</p>
  
  <p>Firstly. this creates artifacts on the screen where the item 1 will be displayed along with item 2 unless I hover over the item 1 menu item again.</p>
  
  <p>Secondly, how do I achieve something which sees which menu item i'm hovering over and switches to the relevant article? As in what type of a selector do I use? I don't see home-disciplines__list-itm working out here.</p>