I seem to have trouble with what should be a simple thing. I can't figure out why what I did isn't working, I want to have an element appear when a link is hovered, but nothing happens when it's done. It only works when I ask the element to appear when the container is hovered, but not for the link.

.elementcontainer {
  opacity: 0;
}

.cardtitle a:hover   .elementcontainer {
  opacity: 1;
}

<div class="maxthumb">

  <div class="card-body">
    <div class="elementcontainer">
      <p class="element">text1</p>
      <p class="element">text2</p>
    </div>

    <h2 class="cardtitle">
      <a class="text-white" href="http://...">Title</a>
    </h2>

    <p class="cardsub">text2</p>

  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I basically have to have the element appear when the link is hover with a simple animation like a fade in or a slide in but so far I can't even have them appear on hover.

CodePudding user response：

They are not siblings so you can't use a sibling selector

But try this javascript code : onm ouseenter ,onmouseleave event

function show(){document.getElementsByClassName('elementcontainer')[0].style.opacity="1";}
function hide(){document.getElementsByClassName('elementcontainer')[0].style.opacity="0";}

    .elementcontainer { opacity: 0; }

<div class="maxthumb">
   <div class="card-body">
      <div class="elementcontainer">
          <p class="element">text1</p>
          <p class="element">text2</p>
      </div>
      <h2 class="cardtitle">
         <a onmouseenter="show()" onmouseleave="hide()" class="text-white" href="http://...">Title</a>
      </h2>
      <p class="cardsub">text2</p>
   </div>
 </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Not sure if it works with elements above the hovering object but if you put the link above it should work. I guess you can still rearrange the layout in css if you want the link below.

<div class="card-body">
        <h2 class="cardtitle">
            <a class="text-white" href="http://...">Title</a>
        </h2>

        <div class="elementcontainer">
          <p class="element">text1</p>
          <p class="element">text2</p>
        </div>
        <p class="cardsub">text2</p>
    </div>

CodePudding user response：

You can make a sibling that follows an element change when that element is hovered, but you can't affect a previous sibling in the same way. I refactored your code a bit to make it work

.card-body {
  opacity: 0;
}

.cardtitle:hover   .card-body {
  opacity: 1;
}

<div class="maxthumb">

    <h2 class="cardtitle">
      <a class="text-white" href="http://...">Title</a>
    </h2>

  <div class="card-body">
      <p class="element">text1</p>
      <p class="element">text2</p>
    </div>

    <p class="cardsub">text2</p>

  </div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I believe you need to use SASS to nest CSS

.cardtitle a:hover{
  .elementcontainer {
     opacity: 1;
   }
}

Or you can attach an event to the hover with JavaScript to change CSS attributes. As shown in the other answer above. JQuery : https://www.w3schools.com/jquery/event_hover.asp JavaScript mouseover: Javascript onHover event