javascript - Mouseover to get div to appear within the border of an image - Stack Overflow

admin管理员组

文章数量:1316388

When I hover over an img within div.hover-group, the div div.hover-toggle bees visible, and bees invisible when the mouse leaves the image. The div.hover-toggle should appear within the area of the img it belongs to, aligned with its bottom border and each of the button.btns of equal width.

To illustrate:

no mouseover:

|-----------|
|           |
|    img    |
|           |
|           |
|           |
|-----------|

is mouseover:

|-----------|
|           |
|    img    |
|           |
|-----------|
| 1 | 2 | 3 |
|-----------|

I have already acplished the hover toggling using jQuery:

$(selector1).mouseover(function(){$(selector2).hide();});
$(selector1).mouseout(function(){$(selector2).show();});

However, have been unable to align div.hover-toggle with the bottom of the image, as illustrated, it appears below the image instead.

How can this be done?

Thanks!

---

The DOM I am manipulating above appears below. It uses twitter bootstrap.

<ul class="thumbnails">
    <li class="span3">
        <div class="hover-group thumbnail">
            <img src="" alt="">
            <div class="hover-toggle btn-group">
                <button class="btn">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
            </div>
            <h5>Thumbnail label</h5>
            <p>Thumbnail caption right here...</p>
        </div>
    </li>
...
</ul>

When I hover over an img within div.hover-group, the div div.hover-toggle bees visible, and bees invisible when the mouse leaves the image. The div.hover-toggle should appear within the area of the img it belongs to, aligned with its bottom border and each of the button.btns of equal width.

To illustrate:

no mouseover:

|-----------|
|           |
|    img    |
|           |
|           |
|           |
|-----------|

is mouseover:

|-----------|
|           |
|    img    |
|           |
|-----------|
| 1 | 2 | 3 |
|-----------|

I have already acplished the hover toggling using jQuery:

$(selector1).mouseover(function(){$(selector2).hide();});
$(selector1).mouseout(function(){$(selector2).show();});

However, have been unable to align div.hover-toggle with the bottom of the image, as illustrated, it appears below the image instead.

How can this be done?

Thanks!

---

The DOM I am manipulating above appears below. It uses twitter bootstrap.

<ul class="thumbnails">
    <li class="span3">
        <div class="hover-group thumbnail">
            <img src="http://placehold.it/260x180" alt="">
            <div class="hover-toggle btn-group">
                <button class="btn">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
            </div>
            <h5>Thumbnail label</h5>
            <p>Thumbnail caption right here...</p>
        </div>
    </li>
...
</ul>

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 5, 2012 at 3:56 bguiz asked Jul 5, 2012 at 2:59 bguizbguiz 28.5k4949 gold badges163163 silver badges251251 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

There is no need for JS here, you can acplish everything with simple CSS and a little markup change (I wrapped the image and the .hover-toggle div in a .image-wrapper div):

<ul class="thumbnails">
    <li class="span3">
        <div class="hover-group thumbnail">
            <div class="image-wrapper">
              <img src="http://placehold.it/260x180" alt="">
              <div class="hover-toggle btn-group">
                  <button class="btn">1</button>
                  <button class="btn">2</button>
                  <button class="btn">3</button>
              </div>
            </div>
            <h5>Thumbnail label</h5>
            <p>Thumbnail caption right here...</p>
        </div>
    </li>
...
</ul>

Now the styling it needs is simple:

.hover-group .image-wrapper {
  /* We need this to make the .hover-toggle div relative to .image-wrapper */
  position: relative;
}

.hover-group .image-wrapper .hover-toggle {
  /* set it at the bottom of .image-wrapper */
  position: absolute;      
  bottom: 0;
  /* and don't display it */
  display: none;
}

.hover-group .image-wrapper:hover .hover-toggle {
  /* only display it when .image-wrapper is being hovered on */
  display: block;
}

If you want it to show when you hover over the whole .hover-group, use this CSS instead of the last line:

.hover-group:hover .image-wrapper .hover-toggle {
  display: block;
}

If you want to keep your structure unchanged, you could set height of div.hover-toggle then set margin of the image as below:

margin:0 0 -30px 0;

which 30 is an appropriate number depends on the height of div.hover-toggle.

Live Demo: http://jsfiddle/4geFu/

本文标签： javascriptMouseover to get div to appear within the border of an imageStack Overflow