-1

I have read this question and trying to implement the solution to my problem. Here(fiddle) is the example. When I hover upon 'Work Grid Image' the 'Work Strategy' div does not show up. HTML:

<span class="work-grid__image">Work Grid Image</span>
<div class="work-grid__images">Work Grid Images
  <div class="work-strategy">
  Work Strategy
  </div>
</div>

CSS:

.work-strategy{
  opacity:0;
}

.work-grid__image:hover + .work-grid__images > .work--strategy{
    -webkit-transition: opacity .5s ease-in-out .5s;
    transition: opacity .5s ease-in-out .5s;
    opacity:1;
}
Community
  • 1
  • 1
  • I see someone down voted the question. Could he/she please also leave a comment why? –  Mar 12 '17 at 15:48
  • As you have a typo (misspelled `work--strategy` with 2 hyphens) that cause the selector to not work I guess someone decided to downvote – Asons Mar 12 '17 at 15:58
  • I recommend to close or delete this question – Asons Mar 12 '17 at 16:03
  • @LGSon: Here is the updated code. Still the text gets displayed without hovering over the other div. https://jsfiddle.net/ufecgntt/3/ –  Mar 12 '17 at 20:39
  • The fiddle you now posted has a different hover rule than the one you posted in your question, .... so if you just keep the above code as is and change the misspelled `work--strategy` in your hover CSS rule to `work-strategy` it works: https://jsfiddle.net/ufecgntt/5/ – Asons Mar 12 '17 at 20:44

1 Answers1

1

You put .work--strategy in your css instead of .work-strategy. Basically, that class does not exist, a simple typo.

AwesomeGuy
  • 1,059
  • 9
  • 28
  • 1
    Since there is a specific reason when to close a question, called "typo", we don't answer those, we vote (or flag) to close them, as they don't benefit future users not being a _proper_ coding issue – Asons Mar 12 '17 at 16:01
  • Okay, didnt know. – AwesomeGuy Mar 12 '17 at 16:03