I want to save ul li a () hide. When I am on the h2 tag, then ul li a () will show

Question

The code is here:

.contentGruop ul{
  margin:0;
  padding:0;
}
.contentGruop li {
  list-style: outside none none;
}
.contentGruop a{
  color:#fff;
}
.contentGruop{
  display:none;
}
h2{
  display:block;
}
h2:hover + .contentGruop {
  display: block;
}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
  <tr>
    <td>
      <h2><a href="#" class="AGreen">Sweater</a></h2>
      <p>The code business</p>
      <ul class="contentGruop">
        <li><a href="">Intimate-Attire</a></li>
        <li><a href="">Intimate-Attire</a></li>
        <li><a href="">Intimate-Attire</a></li>
      </ul>
    </td>
  </tr>
</table>

Run codeHide result

Does not work. If anyone knows where I can find sample code or can point me in the right direction, I would really appreciate it!

Answer 1

Use ( Common selectors ) instead of ( Adjacent selectors ). ~ +

As well as:

h2:hover ~ .contentGruop {
  display: block;
}

Take a look at the snippet below:

.contentGruop {
    margin:0;
    padding:0;
}
.contentGruop li {list-style: outside none none;}
.contentGruop a{color:#000;}
.contentGruop{display:none;}

h2{display:block;}

h2:hover ~ .contentGruop {display: block;}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
        <tr>
         <td>
            <h2><a href="#" class="AGreen">Sweater</a></h2>
            <p>The code business</p>
            <ul class="contentGruop">
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
            </ul>
        </td>
    </tr>
</table>

Run codeHide result

Hope this helps!

Answer 2

Replace and use:

• ~( Combined adjacent block combinator ) instead of +( Combined translator )
• display: none with visibility: hidden
• display: block with visibility: visible

display .

display:none , . .

visibility:hidden , display:none, , . , .

.contentGruop ul {
    margin:0;
    padding:0;
}

.contentGruop li {
  list-style: outside none none;
}

.contentGruop a {
  color:#000;
}

.contentGruop {
  visibility: hidden;
}

h2 {
  display:block;
}

h2:hover ~ .contentGruop {
  visibility: visible;
}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
        <tr>
         <td>
            <h2><a href="#" class="AGreen">Sweater</a></h2>
            <p>The code business</p>
            <ul class="contentGruop">
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
            </ul>
        </td>
    </tr>
</table>

Hide result

, . ()

Answer 3

You can do it with jquery -

$(document).ready(function(){

$('.contentGruop li').hide();
$(document).on({
        mouseenter: function () {

            $('.contentGruop li').show();

        },
        mouseleave: function () {

            $('.contentGruop li').hide();
        }
    }, ".AGreen");
});