58762

CSS on hover show content

Question:

I'm kicking myself here as I've done this plenty of times before, but for some reason my code is not working and I can't workout why. I've been staring at it for a while now so that probably doesn't help. Anyway I'm trying to do a CSS on hover. So when you hover over a div with it displays another div.

<strong>HTML</strong>

<div class="pressListItem"> <img src="" width="" height=""> <h3>July 2013</h3> </div> <div class="pressItemHover">

This is come more content, lalala here is a little snippet

<span></span> <span>Read more</span> </div>

<strong>CSS</strong>

I'm using the opacity transition as I want it fade in.

.pressItemHover{ opacity: 0; transition: opacity 0.5s linear 0s; visibility: hidden; } .pressListItem:hover .pressItemHover{ opacity: 1; visibility: visible; } .pressListItem{ width: 200px; float: left; height: 200px; margin-right:12px; text-align: center; border: solid 1px #e4e4e4; }

If anyone could point out what I'm doing wrong it would be much appreciated!

Answer1:

Change the selector to:

.pressListItem:hover + .pressItemHover { opacity: 1; visibility: visible; }

<strong><a href="http://jsfiddle.net/j08691/BZLG5/" rel="nofollow">jsFiddle example</a></strong>

.pressListItem:hover .pressItemHover looks for an element with the class pressItemHover that is a descendant of pressListItem when in reality it's a sibling, in which case you want to use the adjacent sibling selector +.

Answer2:

In your HTML .pressListItem and .pressItemHover are <em>siblings</em>. In your CSS you're defining styles to a div which is a <em>child</em> of .pressListItem. You need to change HTML to this

<div class="pressListItem"> <img src="" width="" height=""> <h3>July 2013</h3> <div class="pressItemHover">

This is come more content, lalala here is a little snippet

<span></span> <span>Read more</span> </div> </div>

or if you don't wan't to restructure your DOM you can just change this part of CSS

.pressListItem:hover + .pressItemHover {

Recommend

  • assign to a td table the value from a dropdownlist
  • Is Java String immutable? [duplicate]
  • Add missing month into query result
  • R colour scale for logarithmic data?
  • jquery date conversion chrome works but IE and firefox don't
  • datetime strftime does not output correct timestamp
  • Trigger an actionscript function (in a flash object) from javascript
  • Working “Copy to Clipboard” function doesn't work when called in bootstrap modal
  • bootstrap 3 disable background after modal popup [duplicate]
  • Javascript pop up that will fade away
  • font-face not showing up on Firefox
  • Use Greasemonkey to remove table
  • Jquery mobile, cannot get it to change page using $.mobile.changePage
  • AngularJS error injector modulerr
  • How to change slowly background attributes in jquery?
  • iOS background and images seem to not scale properly for retina display
  • Radio button show hover between two radio button using jquery
  • Reinitialise existing jQuery flexslider with new options
  • Bootstrap modal closes when dropdownlist inside fires selected index changed event
  • I have a modal that opens a second modal and cannot close the first modal if open then close the sec
  • How can I have equal heights for inner elements of flexbox grid/boxes/cards without using jQuery?
  • jQueryUI dialog replacement for confirm?
  • div fade-in when window is scrolled a certain distance from the top
  • Outputting SharePoint Hyperlink Column as URL
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • Display images in Django
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Resize panoramic image to fixed size
  • How to set/get protobuf's extension field in Go?
  • Menu Color Fade on Hover with Jquery
  • How to show dropdown in excel using jrxml (jasper api)?
  • Importing jscolor library in angular 2
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled