title: How to OnMouseIn and OnMouseOut element the effect other element correctly?
body: <p>I want when I hover over an element and then it changes the state of the other elements. What I want is when I mouseover the table, then alter the CSS of the next button. </p>
  
  <p>I am having trouble in table hover button does not change.</p>
  
  <p>Preview: <img src="https://s2.postimg.org/begmwhzx5/New_Picture_1.jpg" alt="image"> </p>
  
  <p>I want to hover at the table when the button is also like when the button hover.</p>
  
  <p>Preview: <img src="https://s8.postimg.org/51405lob9/New_Picture666.jpg" alt="image"></p>
  
  <p>You can visit this problem at <a href="https://stage.travelcar.co.id/travel-MLG-SUBJ" rel="nofollow noreferrer">this URL</a>.</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $("tr.accordion td").on({
          mouseover: function() {
              $("a.mau-pilih-travel").addClass("mau-pilih-hover")
          },
          mouseout: function() {
              $("a.mau-pilih-travel").removeClass("mau-pilih-hover")
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS class to change button state:</p>
  
  <pre><code>.mau-pilih-hover{
      background: #31BC86;
      color:#fff !important;
      text-shadow: 2px 2px 0 #888888;
  }
  </code></pre>
  
  <p>Can you find my problem and the solution?</p>