0

I want to select a non-descendant element with css on hover. To be more precise, when I hover on the image with id="tapas", I want to change the visibility of the text with id="cuerpo".

<div id="tapa">
    <div class="imgagenes">
        <img src="img/tapas.jpg" id="tapas">
        <img src="img/tapitas.jpg" id="tapitas">
    </div>
    <div class="text">
        <p id="cuerpo">
            There is text here
        </p>
    </div>
</div>

Some time before I had the text in the same div, with id="imgagenes", but I don't want that right now. Therefore, I had this command on css:

#tapas:hover ~ p {
    visibility: visible;
}
Miguel Fernández
  • 49
  • 1
  • 5
  • it can't work because the paragraph is not a sibling `~` of #tapas. In order to work either you change the structure of the markup or you need to use javascript. In CSS only it could work if you hover the element `.imgagenes`. – Fabrizio Calderan May 28 '21 at 07:52
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#combinators It is not possible to do this with CSS. – BOZ May 28 '21 at 07:53

0 Answers0