-1

I should say on the outset that I am not familiar with Javascript, so a solution involving HTML or CSS if possible would be really helpful!

The site I am building uses something very similar to the hover-to-show effect shown here.

It works just fine, until there comes a situation where I need to separate the two divs further by another div;

i.e.; going from this:

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

to this:

<div>
<div class="myDIV">Hover over me.</div>
</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
lehtia
  • 23
  • 5
  • There is no way to do this with css alone. I can offer a workaround if the clickable element is a parent of the hidden element. Gerard's answer is the best you can get, but if you share your code there may be a workaround for your case – alotropico Aug 05 '20 at 06:26
  • @alotropico Thank you for your reply! I would appreciate that so much! I have a codepen [here](https://codepen.io/brxtn/pen/MWyWJGL) and the relevant CSS is going to be the .box1 bit :) I have left a little comment above it explaining my situation. – lehtia Aug 05 '20 at 06:30
  • I took a look at it and beside the point, I think you are making it extremely hard and complicated just to avoid using a little javaScript. I shouldn't even say this in this site but it's an interesting design and idea and you are kind of holding back your creativity and loosing a lot of time with this issue, when a couple of hours of jQuery (you have it working already) would free you to do a lot more amazing stuff – alotropico Aug 05 '20 at 06:43
  • @alotropico That is very kind! Thank you! Maybe I should just bite the bullet and use some jQuery. I just don't ever know where to begin. Whenever someone offers me some java as an answer to a problem and I try to experiment with it, everything just breaks haha! – lehtia Aug 05 '20 at 06:47
  • Take a look at this. I just added some data-link and data-box attributes to the elements and a few lines of jQuery so they are shown and hidden wherever they are on the page, so you don-t have to worry about the markup affecting the functionality. I really think you should go ahead and follow some courses on Css, Html, Javascript, you will be better and better in no time, you will see results every day, and I only bother to tell you this because your design and taste seems so original and fresh --> https://codepen.io/alotropico/pen/WNwNpNY – alotropico Aug 05 '20 at 07:11
  • 1
    @alotropico You are amazing!! Feeling very inspired! Thank you. I think I will take you up on your advice, maybe starting with trying to pick apart what you've set up for me! :) – lehtia Aug 05 '20 at 07:13
  • @alotropico do you have any idea why copying all of the code from the pen you made into mine gives me an error in the Javascript? are there settings I should be aware of? – lehtia Aug 05 '20 at 07:24
  • Probably jQuery not loading correctly (jQuery is just some tool to make js easier and quicker, it's quite old and not the best nowadays but still popular and ok to use). Take a look at it now – alotropico Aug 05 '20 at 07:34
  • @alotropico It seems that in your Javascript settings, there was a link written for codepen to open [this](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js) before running any scripts. I think that did the trick! – lehtia Aug 05 '20 at 07:39

1 Answers1

0

That's not possible with just CSS unless you can apply the CSS to the newly created parent

.hide {
  display: none;
}

.newlycreatedparent:hover+div.hide {
  display: inline-block;
}
<div class="newlycreatedparent">
  <div>Hover over me.</div>
</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • Thank you for your quick reply! Would I be able to send you a codepen I am working on so you can see the exact situation I am working with? – lehtia Aug 05 '20 at 06:23
  • @lehtia sure. Send the link in a comment or include it in the post. – Gerard Aug 05 '20 at 07:40