I can not solve a goal using ": hover". What to do?

Question

I can not solve a goal using ": hover". What to do?

Navigation

#1 by (6 votes)

2

I'm doing an institutional website and it's a type of web-design agency, but it's more to learn.

Then in the home I made several links with links to the pages of the services. And in each block my intention is to make when hovering over a short description before the user clicks and goes to the page.

I've been able to (in parts) do this in two ways (in both cases something went wrong):

1st way - overlapping two rows of blocks (the top one with the icons and titles and the bottom one with the descriptions) and when you hover the mouse over some upper block it changes the height to 0% making the block with the description appear below. Problem : Any movement on the mouse causes the class to exit :hover (logically because the element disappears and the mouse exits from above).

2nd way - just a block race . so my intention was to do this: the block is there with the icon and title in the form of background-image and the description there (in text within div ) in display:none , ai in :hover o background-image becomes none and description turns block . Problem That way it did not work; I move the mouse over the div and it does not change the display, I tried with visibility and it also did not work. (I let the part in question visible only for people to see but it is commented in the code).

Of the second way I could make the description in image form, it would work: just change the background-image . But it would hurt in SEO.

I also tried with JavaScript and could not.

css hover

asked by anonymous 29.10.2014 / 02:53

1 answer

Can a servlet send to two different JSPs? How to import data from a txt to MySQL with php?

score 6 · Accepted Answer

Generic solution:

I tried to do only the essentials of CSS, and "pushed" the frame with information just for you to test hover . Just change the dimensions and positions for the desired layout, as this solution is very generic and adaptable.

If you want the two things to appear exactly in the same space, just put the width and height of span equal to the parent block.

The "secret" of the solution is the alternative content within the element that will "suffer" the hover , so when it appears, hover remains active.

(Remember to see the 2nd demo, at the end of the post, which is more complete)

a.bloquinho {
  display: block;
  position: relative;
  width: 200px;
  height: 20px;
}
.bloquinho span {
  display: none;
  position: absolute;
  top: 0;   /* ajustar como desejado */
  left: 20px; /* ajustar como desejado */
  background: #eee;
  z-index: 10;
}
.bloquinho:hover span {
  display: block;
}

<a class="bloquinho" href="#">Link 1
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 2
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 3
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>
<a class="bloquinho" href="#">Link 4
  <span> descrição do link bla bla bla bla bla bla bla</span>
</a>

Adapting to the linked example:

If you prefer the "curtain" effect, simply use span by surrounding the link instead of surrounding the content:

a.bloquinho {
  float:left;
  margin-right: 20px;
  display: block;
  position: relative;
  width:100px;
  height:150px;
  background: #eee;
}

.bloquinho span {
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  width:100px;
  height:150px;
  -webkit-transition: height .5s;
  transition: height .5s;
  z-index: 10;
  overflow:hidden;
}

.bloquinho:hover span {
  height: 0;
}

<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg"width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg"width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg"width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>
<a class="bloquinho" href="#">
  <span><img src="http://i.stack.imgur.com/VmVz4.jpg"width="100" height="150"></span>
  descrição do link bla bla bla bla bla bla bla
</a>