wroh woefh wroh woefh - 2 months ago 13
CSS Question

( css ): can i trigger two of css events simultaneously by just triggering one event or the class name that two of events are included?

This is an image of description.

i want two of zones background to get yellow background. but it only works when mouse on "This is Actual zone", and it doesn't work on "section_tr_inbody zone"

In section_tr_inbody zone, yellow background only partially...working

what is problem with my code?

(CSS)

#Actual {
padding: 20px;
font-weight: bold;

}


.together:hover {
background-color: yellow;
}


(HTML)

(...)
<tr id="section_tr_intbody" class="together">
(...)




(...)
<div class="Slider slideup">
<div id="Actual" class="together">
(...)


each of two elements have same class name 'together' which i thought it should be fine that 1) css catch one of those elements then, 2) it applying effect to both of them at the same time

on Actual side, css catch
<div id="Actual" class="together">
then apply effect both.

on the other hand,

on
<tr id="section_tr_intbody" class="together">
side, css catch
<tr id="section_tr_intbody" class="together">
but it apply effect not including Actual side.

thanks

Answer

I don't think this can be done with only CSS since you can't traverse up the DOM with CSS.

You can do this fairly easy with jquery though:

$('.together').hover(function() {
        $('.together').addClass('yellow');
  },
   function(){
        $('.together').removeClass('yellow');
  });
#Actual, #fake, #random {
            padding: 10px;
            font-weight: bold;
        }
td { padding: 10px; }
.yellow {
    background-color: yellow;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="section_tr_intbody" class="together">
       <td>Table cell stuff</td>
      </tr>
    <tr id="section_tr_intbodyagain" class="nottogether">
       <td>More table cell stuff</td>
      </tr>
    <tr id="section_tr_intbodystill" class="together">
       <td>Even more table cell stuff</td>
      </tr>
    </table>


<div class="Slider slideup"> 
      <div id="Actual" class="together">
        Div stuff
        </div>
      <div id="fake" class="nottogether">
       more Div Stuff
       </div>
      <div id="random" class="together">
       Even more Div Stuff
       </div>
 </div>