title: How to hover two elements implicitly while hovering another one with JQuery?
body: <p>is there a way to trigger the hover of two elements when hovering on another one with JQuery?</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
     &lt;html lang=""&gt;
      &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html"/&gt;
        &lt;meta charset="utf-8"/&gt;
            &lt;script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
            &lt;script type='text/javascript' src='javascript.js'&gt;&lt;/script&gt;
            &lt;link rel='stylesheet' href='style.css' type='text/css'&gt;
        &lt;title&gt;Title&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
         &lt;div class='hidden'&gt;&lt;/div&gt;
         &lt;div class='triggerOtherHover' onmouseover='hoverImplicitly();'&gt;&lt;/div&gt;
         &lt;div class='hidden'&gt;&lt;/div&gt;
     &lt;/body&gt;
    &lt;/html&gt; 
  </code></pre>
  
  <p>Here is my style.css:</p>
  
  <pre><code>.hidden { 
            background-color:red;
            border: 1px solid black;
            opacity:0;
            transition: opacity 0.4s ease-in-out;
            width: 100px;
            height:100px;
   }
  .hidden:hover, .visible {
            opacity:1;
  }
  
  .triggerOtherHover {
             width:100px;
             height:100px;
             background-color:green;
  }
  </code></pre>
  
  <p>Here is my javascript.js:</p>
  
  <pre><code>function hoverImplicitly {
             $(".hidden").toggleClass('visible');
  }
  </code></pre>
  
  <p>When I hover the mouse on the <strong>div.triggerOtherHover</strong>, the other two divs with .hidden class become red cause of the opacity, but when I remove the mouse from the div.triggeOtherHover, the divs are still red. I would like them to become transparent (opacity: 0) again.
  Is there a way to make them behave like the CSS :hover pseudo class? </p>