1

I'm trying to display a div class but it won't show. I'm not sure what I'm doing wrong. Here's what I'm doing.

So, I have a table. The point of this is to hover on one of the tables contents and show a display with more details of the link hovered. In this case "Hover Me!"

file.html

<div id="bigBody">
<table class="tableClass">
<tr>
<td>
<a class="hoverHereToPopUp">Hover Me! </a>
</td>
</tr>
<table> /*Just to keep the table short */ 

<div class="hoverPopUp">
    <p>This is a Hover</p>
</div> /*EO HoverPopUp */
</div> /*EO bigBody */

style.css

div.hoverPopUp {
    display:none;
    width:auto;
    height:auto;
    border:dotted purple;
}

a.hoverHereToPopUp:hover + div.hoverPopUp {
    display: block;
}

I added some styles to attempt to debug my issue:

a.hoverHereToPopUp {
    color:red;
    border:green dotted;
}

a.hoverHereToPopUp:hover {
    color:white;
    border:yellow dashed;
}

The hover is changing the color but the div isn't showing.

What am I doing wrong?

Viewing this on chrome.

The Hover is inside a table. which is inside a DisplayDiv, in that container there's another divContainer for the popUp. So, BIG box has 2 Small Boxes, one with the Hover(a table) and another(a div) for the Pop Up. Is this the problem????

4

2 回答 2

1

If I understand correctly, the hidden div needs to be inside the div which gets the hover.

Something like this:

<div>
    Hover over me
    <p>This is hidden</p>
</div>

See: http://jsfiddle.net/webbymatt/URwNz/

The current way you have your markup means this will not work with CSS. What you need to do is put the hidden area INSIDE the hoverable div. Like this:

<div id="bigBody">
  <table class="tableClass">
    <tr>
      <td>
        <a class="hoverHereToPopUp">
          Hover Me! 
          <p>This is a Hover</p>
        </a>
      </td>
    </tr>
  </table> /*Just to keep the table short */ 
</div>

Then with your CSS

.hoverHereToPopUp p {
  display: none;
}
.hoverHereToPopUp:hover p {
  display: block;
}
于 2013-09-04T15:42:57.803 回答
0

From what @Slevin pointed out, the code provided is working fine. I would recommend look at the rest of your code of inspecting the live code to see if you have the element you're trying to show hidden elsewhere.

于 2013-09-04T15:40:08.503 回答