CODEWITHSUNDEEP
htmlcsshover
feelerino
feelerino

Reputation: 121

Hover to multiple elements at the same time?

I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.

http://codepen.io/anon/pen/GogjQK

I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.

This is how I'm trying to make it appear on hover, as well when the the link is clicked and active

enter image description here

Hope someone can help me out with this one. Thank you in advance.

Upvotes: 1

Views: 7572

Answers (2)

Nate Peace
Nate Peace

Reputation: 11

Try adding a hyper reference after the creation of the div that contains your block, like this:

<div class="frame"> <a href="http://stackoverflow.com">
  <img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
  <div class="info">
    <h3>H3</h3>
    <p>pppppp</p>
  </div>
  </a>
</div>

Then in CSS, refer to the entire block as a link, like this:

.frame a {
  float: left;
  width: 300px;
  min-height: 60px;
  background-color: ##00F;
  margin: 0px 10px;
  border: 1px solid black
}

.frame a:hover > .info > h3 {
  color: green;
}

Example: codepen

Upvotes: 0

JD Davis
JD Davis

Reputation: 3720

You can use child selectors on your frame div to affect the children within.

For example, I added the following code to color the h3 tag when the main frame is hovers.

.frame:hover > div > h3 {
  color: #00bb00;
}

If you modify your HTML slightly to be

<div class="frame">
  <img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
  <img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
  <div class="info">
    <h3>H3</h3>
    <p>pppppp</p>
  </div>
</div>

You can use the following CSS to change the image as well:

.frame:hover > .thumbnail {
  display:none;
}

.frame:hover > #hidden {
  display:inline;
}

#hidden {
  display:none;
}

Here's an example codepen.

Upvotes: 3

Related Questions