I am trying to get multiple effects on a single image hover to allow the best outcome with the least code possible. Note: I do not want jquery at all! CSS only (even 3).
So I have an image which will change on hover and at the same time cause a Div below the said image to change the background image as well (which is actually text, I just couldn't find a way to change the text so I tried the image) and with it all having the hover image on the IMG tag to have a link to the place I want.
So far I managed to get the image changed and the links working on the hover image with this:
CSS
.container
{
width: 1500px;
height: 400px;
}
.image a:hover .container
{
background-image: url('logo-tp-text.png');
}
HTML
<div class="image">
<a href="http://www.google.com">
<img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>
<div class="container"></div>
Now, as you much more experienced people than me can see, I have the image on IMG tag self onmouseovered and out to try and avoid complications on the CSS, which worked: it changes into the image I need (LOGO-FB) and reverts to LOGO-TP onmouseout, with the link working. However, it is not changing the .container background as expected on hover on the IMG tag (which is the A tag reference)
So, waiting for the beating: what am I doing wrong? Using FF 32 browser.
Css does not contains parent navigation selectors... Only descendant and following sibilings.
Since the .container div is a sibiling to the .image div, you could set the :hover pseudo to the div instead to the anchor:
.image:hover ~ .container {
background-image: url('logo-tp-text.png');
}
As ~ is a general sibiling selector.
More info here: MDN General sibiling selector
Also
If the html markup stays the same as you showed, I mean, if the .container remains as a immediate followed sibiling to the .image div, you can also use an Adjacent Sibiling Selector
.image:hover + .container {
background-image: url('logo-tp-text.png');
}
Related
I think my classes or ID's are messed up when I try to call it.
CSS:
image#ply : hover .ply-text {
visibility: visible;
}
HTML:
<image id="ply" style="height: 50px; padding:5px;" src="images.png">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Some issues first:
The HTML element for embedding images is called img.
An img element's content model is empty, i.e. it may not have any child elements.
Even if those were not issues, you would not see the effect you're looking for since the text is already visible at the start.
Given that, here's a possible solution:
.ply-text {
visibility: hidden;
}
#ply:hover ~ .ply-text {
visibility: visible;
}
The ~ is a sibling selector that allows one to refer to an element following another.
Images use an <img> tag (not 'image') - that's important to note (as it hasn't been commented on so far). As remarked, you should remove the space between the id and the :hover in your css.
I would advise you remove the inline style and use css or at least add it into your id style/ add extra attributes as a class in the head of the body (css is better!).
In the style, you don't need image/img before the definition of your id, you can just leave #ply{your style} on it's own.
If you want to display the pic on hover, I would use display:block/none instead. Visibility just shows it if it's hidden. (I've done so in the snippet, run and see if it's the desired effect). Also, use an alt tag! I added one. If you want to show/hide the text you could use either but first you have to set the visibility to hidden or display to none... I added a class for ply-text on its own for this.
So your code would read
#ply {
height: 50px;
padding: 5px;
}
.ply-text{
display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
display:block; /* or visibility:visible*/
}
<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Hope this helps
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
I am practicing my css using the hover when I notice this problem when I hover on top the color will change to blue and the middle will change to color red but when I hover to middle the middle changes the color to red but the top remains.
I tried to add a !important to the middle:hover but it didn't work. I also remove the + sign but i think it will not work since it should be on the same div for that to work.
why does the hover not working for the top div when middle div is hovered?
HTML
<div class="top">
<p> HELLO WORLD </p>
</div>
<div class="middle">
<p> HELLO PEOPLE </p>
</div>
CSS
.top:hover + .middle {
color:red;
}
.top:hover {
color:blue;
}
.middle:hover {
color:red;
}
.middle:hover + .top {
color: blue;
}
FIDDLE HERE
You cannot select a parent element in CSS unfortunately. But JavaScript can be used to resolve this problem.
Check out this for more info on selectors...http://www.w3.org/TR/CSS21/selector.html
The CSS + selector is the next sibling selector. It doesn't work on previous siblings, similar to how you can't target a parent from a child. This is because CSS works Top-Bottom, (ie parent > child, next sibling etc) and not vice versa.
This article explains why CSS doesn't have a parent selector but same logic applies for the lack of previous sibling selectors.
tldr: Bottom-Up CSS selectors are not feasible because of their performance implications in browsers.
So I'm trying to get a onMouseOver to replace an image when the mouse is hovering over a div, unfortunately, as I have it right now it only replaces the image when the mouse is directly over the image, not the div, is there a way to get this to work?
Should I use a CSS to place the image, and replace the image on hover instead?
<div class="link">
<a href="link.html">
<img src="img.png" onMouseOver="this.src='hoverimg.png'" onMouseOut="img.png'"
<div class="title">Title</div>
</a>
</div>
I prefer using CSS for this:
<div class="image-hover">
Some title
</div>
.image-hover { background: url(...);}
.image-hover:hover { background: url(...);}
This can be achieved with CSS and background images. You also should not be using a block level element (div) inside of an inline element (a). I've swapped it for a span. For example:
<style type="text/css">
.link a {
display:inline-block;
background: url('img.png') top left no-repeat;
width:(imagewidth)px;
padding-top:(imageheight)px;
}
.link a:hover {
background: url('hoverimg.png') top left no-repeat;
}
</style>
<div class="link">
<a href="link.html">
<span class="title">Title</span>
</a>
</div>
The complete optimum would be combining the two images into what is called a sprite and use background-position.
You can do this with CSS or jQuery. Most people will recommend that you use CSS because it is easier to debug:
If you want the image to change when you hover on the div, you can apply a :hover state to the div:
.link img{
background: url("image1.png");
}
.link:hover img
{
background: url("image2.png");
}
However you should note that this basically treats img as an inline-block element and does not change the src attribute.
jQuery will allow you to change the source, but it must be debugged if something goes wrong, and if JS is disabled, it will not run.
$(".link").hover(function(){
$(this).find("img").attr("src", "image2.png");
}).mouseout(function(){
$(this).find("img").attr("src", "image1.png");
});
JSFiddle
Let's say I have the following:
<style>
.myLabel {
color: blue;
}
.myLabel:hover {
color:red;
}
</style>
<div>
<img src='myimage.png' />
<span class='myLabel'>Image Label</span>
</div>
Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?
There don't seem to be any sibling selector for previous siblings.
W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).
So, I think you'll find it easier to accomplish with :hover set to the div.
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
<style>
.myLabel img { background-image: url('...'); }
.myLabel span { color: blue; }
.myLabel:hover img { background-image: url('...'); }
.myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
<img src='transparent.png' />
<span>Image Label</span>
</div>
An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:
.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }
Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.
You could also put the image inside the span:
<div class='myLabel'>
<span>
<img src='transparent.png' />
Image Label
</span>
</div>
Then your css would be:
.myLabel span:hover img { ... }
FYI Only <a> tags work with :hover in IE6 (but it's old anyway)
No, you can not replace the value of the src-attribute in any way.
Jonathan Lanowski Said:
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.
The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.
So then, this is a typical Javascript-job.
one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.
see: http://www.alistapart.com/articles/sprites/
specifically the "Hovers" section.
They offer a functional example here:
http://www.alistapart.com/d/sprites/ala-image3.html
EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.