CODEWITHSUNDEEP
javascripthtmlcss
neurobeans
neurobeans

Reputation: 21

Conflicting hover/mouseover functions

Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).

The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?

These are the relevant bits in my stylesheet, mostly covering the text part:

.rightbox { 

background: rgb(140, 183, 98); 
width: 290px; 
height: 160px; 
margin-bottom: 18px; 
padding: 2px;}

.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;

}

.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}

.rightboxtext:hover span {
height: 80px;
}

This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)

    <div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>

Otherwise I achieved this mangled bit of code, where one seems to block the other:

<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>

With this extra bit in the stylesheet:

.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}

Thanks in advance!

Upvotes: 1

Views: 676

Answers (2)

Ben Y
Ben Y

Reputation: 1881

As a commenter pointed out above, you can do this entirely with CSS:

<style>
* {
    padding: 0;
    margin: 0;
}

.box {
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.box img {
    width: 250px;
    height: 250px;
}

.box .message {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 250px;
    height: 250px;
    position: relative;
    top: -256px;
    color: #fff;
    font-size: 32px;
    line-height: 250px;
    text-align: center;
    font-weight: bold;
    font-family: arial;
}

.box .message:hover {
    opacity: 1;
}
</style>
<div class="box">
    <img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
    <div class="message">Antarctica</div>
</div>

.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.

http://jsfiddle.net/dgGG3/4/

Upvotes: 1

caramba
caramba

Reputation: 22480

Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.

The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.

.rightbox:hover {
    opacity:0.5;
}

You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.

so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/

I would say that's the way to go

Upvotes: 0

Related Questions