1

I have been told that this isn't possible via CSS alone and so have turned to javascript.

Using onmouseover but I cannot get the hidden element to appear. I want it so that when hovering over element with ID #a, element with class .excerpt-box appears and then disappears when the mouse is moved away.

Does anyone know where I am going wrong? Thanks

Here's the code I've written so far:

The CSS includes visibility hidden for .excerpt-box.

          <div class="ind-circle" id="a" onmouseover="showExcerpt()">
            <p class="circle-title"> <a href="#">Read more</a></p>
          </div>
          
          <div class="excerpt-box" id="b">
          <h1 class="excerpts-title">This is an example excerpt title...</h1>
          <img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
          <p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

function showExcerpt() {
  document.getElementByClass('excerpt-box').style.visibility = 'visible';
}
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
ARick12
  • 35
  • 5

2 Answers2

2

First, the function you are looking for is document.getElementsByClassName. After this you have to select a particular element by index. See this link.

Better would be this solution: Grab the id of the div (id='b') and set display to block. As you can see, the div is display:none; at startup.

function showExcerpt() {
  document.getElementById('b').style.display = 'block';
}
.excerpt-box {
  display: none;
}
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
  <p class="circle-title"> <a href="#">Read more</a></p>
</div>

<div class="excerpt-box" id="b">
  <h1 class="excerpts-title">This is an example excerpt title...</h1>
  <img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
  <p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
tboom
  • 106
  • 3
  • That's worked great, thank you. Why does "display: block;" work better than visibility? – ARick12 May 29 '20 at 12:25
  • The difference between visibility and display is, that visibility will take up space on the page. So both will work, best solution depends on your use-case. – tboom May 29 '20 at 12:31
0

Your HTML structure allows to do the same via CSS as well.

.excerpt-box goes right after the .ind-circle and can be targeted via adjacent sibling combinator.

.excerpt-box {
  display: none;
}

.ind-circle:hover + .excerpt-box {
  display: block;
}
elushnikova
  • 101
  • 2
  • Hi mate, no I've just ordered those bits of code like that for the sake of the question, so I didn't have to include the entire file - those two bits of code are in different divs, thanks though – ARick12 May 29 '20 at 16:30
  • @ARick12, I see, JS for the win then :) – elushnikova May 29 '20 at 17:03