Change display style on div using only CSS

Question

I'm using haml and scss on a rails website and I have a "learn more" anchor tag. I want to be able to hover over the anchor tag and display a div with a class of ".tb-description" using only CSS(SASS) if possible. How can I change the display style on the div.tb-description?

haml code:

.book
  %span.tb-message
    = number_to_currency(tb_array[0], :precision => 0)
    = link_to '#', :class=>"tb-learn-more-link" do
      learn more
.tb-description
  .tb-description-content
    This is text I want to display when the "tb-learn-more-link" anchor tag is hovered over

scss code:

.tb-learn-more-link {
  text-decoration: underline;
  padding-left: .313em;
}
.tb-description {
  display: none;
  float: left;
  margin: 14px 0 0 10px;
  width: 250px;
}

Is there any reason why you cannot use javascript here? It'll be fast enough. — marzapower
– marzapower, Commented Nov 19, 2013 at 19:44
I was hoping to just use CSS because similar hover effects on this site are handled with CSS, thinking the consistency would provide better readability since I'm not the only person working on it. I ended up using javascript anyways. — dagarre
– dagarre, Commented Nov 19, 2013 at 22:09
I thought so, but the other cases involved elements that had parent/child relationships, so the context isn't exactly the same. — dagarre
– dagarre, Commented Nov 20, 2013 at 14:17

marzapower · Accepted Answer · 2013-11-20 14:37:45Z

1

If you want to use a pure-CSS-based solution, you cannot achieve this. You have to choose between these two solutions:

Keep the actual page layout and implement a solution via javascript, listening to mouseenter/mouseleave events and then applying changes to the hidden div accordingly
Modify the page layout so that the link you want to hover and the hidden div are siblings in the DOM structure. This way you can make use of the + CSS operator and hide/unhide the div using the :hover pseudo-class on the anchor

Sadly CSS is not capable of reverse-traversing the DOM structure, so you will never be able to modify the aspect of .tb-description when you hover .tb-learn-more-link since they belong to different branches of the structure.

answered Nov 20, 2013 at 14:37

marzapower

5,6217 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Louis Ricci · Accepted Answer · 2013-11-19 19:56:50Z

1

You can do this the :hover pseudo class in css. http://jsfiddle.net/W6V7r/

<a href="#" class="more">More...</a><div class="description">blah blah blah blah</div>

.more {

}
.description {
    display:none;
}
.more:hover+div.description{
    display:block;
}

EDIT If you can't get to the DIV from the A tag's :hover then you are stuck with a click and using :target pseudo class.

<a href="#desc" class="more">More...</a>
<br><hr><br>
<div id="desc" class="description">blah blah blah blah</div>

.more {

}
.description {
    display:none;
}
div.description:target{
    display:block;
}

edited Nov 19, 2013 at 19:56

answered Nov 19, 2013 at 19:44

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

4 Comments

marzapower Over a year ago

This is not going to work either. The link and the div are not direct siblings, they live in different sections. The + operator will not catch this situation!

Louis Ricci Over a year ago

@marzapower - You can't use hover then. You'd either need to use the onmouse[enter/over] javascript event or if you insist on css only you'd have to use anchor hash and make the user click on the "more" link.

marzapower Over a year ago

In fact, this is not my question. I suggested to the owner to use Javascript, because IMHO is the only way to solve such a problem given that layout.

dagarre Over a year ago

Thanks, this is what I originally tried and for whatever reason it's not working in my code. I think something's wonky in this particular instance; I'm just going to try a javascript solution instead. I'll post an answer if I figure out with this isn't working.

strivedi183 · Accepted Answer · 2013-11-19 19:42:15Z

0

You could try

.tb-learn-more-link {
  text-decoration: underline;
  padding-left: .313em;
}
.tb-learn-more-link:hover .tb-description {
  display: none;
  float: left;
  margin: 14px 0 0 10px;
  width: 250px;
}

Hope this helps

answered Nov 19, 2013 at 19:42

strivedi183

4,8373 gold badges33 silver badges41 bronze badges

2 Comments

marzapower Over a year ago

This is not going to work, since the .tb-description is not inside the .tb-learn-more-link!

strivedi183 Over a year ago

Misread that! my mistake, thought it was a parent/child relationship, thanks for catching that, @lastcoder's answer has the right idea

Jonathan Strate · Accepted Answer · 2013-11-19 19:46:52Z

0

You can use CSS selectors and a pseudo class for this.

HTML:

<div class="tb-description">
    Description
</div>
<div class="tb-description-content">
    Content on hover
</div>

CSS:

.tb-description+.tb-description-content {
    display: none;
}
.tb-description:hover+.tb-description-content {
    display: block;
}

answered Nov 19, 2013 at 19:46

Jonathan Strate

1212 bronze badges

3 Comments

marzapower Over a year ago

As for @LastCoder's answer, this will not work with his current page layout.

Jonathan Strate Over a year ago

@marzapower - You are correct. In the case where we can't infer a relationship between the two elements they have to be explicitly connected. @LastCoder's edit introducing the pseudo :target property will achieve this.

marzapower Over a year ago

You cannot achieve the equivalent of a :hover with a click! That's just not the same thing. The question is specific on this.

Collectives™ on Stack Overflow

Change display style on div using only CSS

4 Answers 4

Comments

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related