Show hidden table when hovering other table td?

Question

SOLVED USING JQUERY*

I have two tables in a custom module. One is always on display and the other one is hidden. When I hover on the first <td> of the visible table, the hidden table below the visible one needs to fade in.

I have looked into a few answers on this topic and even though I followed the CSS styling to a T, it still doesn't want to work.

<div class="partnersnew">
<table class="index" width="100%">
<tbody>
<tr>
<td>
<div id="testdiv1"><img src="images/partners/tableimages/img1.jpg" alt="" />Text 1</div>
</td>
<td><img src="images/partners/tableimages/img2.jpg" alt="" />Text 2</td>
<td><img src="images/partners/tableimages/img3.jpg" alt="" />Text 3</td>
<td><img src="images/partners/tableimages/img4.jpg" alt="" />Text 4</td>
</tr>
</tbody>
</table>

<br />

<table class="index2">
<tbody>
<tr>
<td><img src="images/partners/test/partnerlogo.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</div>

.partnersnew .index2 {

    display:none;

}
.partnersnew table.index #testdiv1:hover + .index2{
    display: block;

}

WORKING JS CODE I USED BELOW

<script>
$(function() {
$("#testdiv1").hover(function() { 
    $(".index2").fadeIn(); 
}, function() { 
    $(".index2").fadeOut(); 
});
});
</script>

There are not any error messages. This is simply not working. I followed the exact same code as some of the answers here. Am I doing something wrong?

This won't work. The + operator works only for elements within the same parent. Since the hovered td is in another table, you really need a CSS "parent" selector, which does not exist. — Mr Lister, Aug 22 '19 at 08:19
Thanks for the answer. How would I go about adding a "parent" selector? — loopingnoob, Aug 22 '19 at 08:22
I don't think you will be able to do that with css alone. You might need JS — Azzam Asghar, Aug 22 '19 at 08:23
Will JS be easier to solve this than CSS? Since I can just add a fade-in and fade-out function? — loopingnoob, Aug 22 '19 at 08:24
I guess JS is a better solution here Mr Lister is right + operator won't work for this scenario — Azzam Asghar, Aug 22 '19 at 08:29
@loopingnoob try this pen if you are ready to jquery https://codepen.io/soothran/pen/jONVjrw — Soothran, Aug 22 '19 at 08:36
Here is a blitz i tried out but its for when hovering over full table. You surely need JS or Jquery for this https://stackblitz.com/edit/js-of7g1t — Azzam Asghar, Aug 22 '19 at 08:43
Thanks guys I used jQuery to solve it! Both Soothran and Azzam your examples worked fine! Thanks a lot guys it's solved — loopingnoob, Aug 22 '19 at 12:02

Show hidden table when hovering other table td?

0 Answers0