CSS On hover show another element

Question

I want to use CSS to show div id  b  when I hover over div id  a   but I cannot figure out how to do it because the div  a  is inside another div that div  b  is not in    lt div id  content  gt        lt div id  a  gt           Hover me       lt  div gt   lt  div gt   lt div id  b  gt      Show me  lt  div gt

User · Answer

we just can show same label div on hovering like this   lt style gt   b       display  none      content hover  b      display  block      lt  style gt

User · Answer

You can use axe selectors for this  There are two approaches  1  Immediate Parent axe Selector   lt    a hover  lt   content    b  This axe style rule will select  b  which is the immediate sibling of  content  which is the immediate parent of  a which has a  hover state   x000D   x000D  div   display  inline-block  margin  30px  font-weight  bold      content   width  160px  height  160px  background-color  rgb 255  0  0       a   b   width  100px  height  100px  line-height  100px  text-align  center      a   color  rgb 255  0  0   background-color  rgb 255  255  0   cursor  pointer      b   display  none  color  rgb 255  255  255   background-color  rgb 0  0  255       a hover  lt   content    b   display  inline-block    x000D   lt div id  content  gt   lt div id  a  gt Hover me lt  div gt   lt  div gt    lt div id  b  gt Show me lt  div gt    lt script src  https   rouninmedia github io axe axe js  gt  lt  script gt  x000D   x000D   x000D    2  Remote Element axe Selector      a hover    b  This axe style rule will select  b  which is present in the same document as  a which has a  hover state   x000D   x000D  div   display  inline-block  margin  30px  font-weight  bold      content   width  160px  height  160px  background-color  rgb 255  0  0       a   b   width  100px  height  100px  line-height  100px  text-align  center      a   color  rgb 255  0  0   background-color  rgb 255  255  0   cursor  pointer      b   display  none  color  rgb 255  255  255   background-color  rgb 0  0  255       a hover    b   display  inline-block    x000D   lt div id  content  gt   lt div id  a  gt Hover me lt  div gt   lt  div gt    lt div id  b  gt Show me lt  div gt    lt script src  https   rouninmedia github io axe axe js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

It is indeed possible with the following code    lt div href     id  a  gt       Hover me   lt  div gt    lt div id  b  gt      Show me  lt  div gt    and css   a     display  block      a hover    b     display block      b     display none        Now by hovering on element  a shows element  b

[html] CSS On hover show another element

Examples related to html

Examples related to css

Examples related to hover