Have a div filled with elements appear when hovering a link, code not working

user_17450035 0
Viewed 63

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>

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.

jekyll css html javascript
4 Answers

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

But try this javascript code : onmouseenter ,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>

user_174978620

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>
user_174786760

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>

user_74942180
user_87428870
Related