Is it possible to have an image hidden by default and unhide it on :hover? I tried using the visibility property, but invisible elements can't be hovered on.
If you use display or visibility, the element is not there so you can't hover over it. Try it with opacity:0; . You can do it with css:
.img { opacity:0; }
.img:hover { opacity:1; }
I realize that you specifically asked about jquery, but it is possible to do what you're asking just with css, though you may have to use opacity:0 rather than display:none to hide the image.
You can use a css hover event. Start by applying a class to your image:
<img src="theimage.jpg" class="hidden-image"/>
In your css, you can then use the class and a css hover event to show the image when the cursor is over the image:
.hidden-image {
opacity: 0;
}
.hidden-image:hover {
opacity:1;
}
Here's a jsfiddle: http://jsfiddle.net/fZd7J/
Directly you can't mouseover/hover a hidden image that is, its not possible with visibility:hidden; or display:none;, but you can have some tricks to do that.
using css
apply opacity: 0; to the image and :hover change opacity:1;
using js
create a parent <div> to the image and mouseover to that div apply display:block; to image.
Working Fiddle Click here
Related
I want to remove icons from my website using CSS
You can see it here https://www.stormyark.de/hksv
I uploaded the website files at github
I already tried to set the "width=0" of the icons but nothing happened.
use display: none; on the class of the element you want to hide.
There are 3 ways of hiding an element in CSS.
display: none;
This will remove the element from the DOM
opacity: 0;
This will hide the element.
visibility:hidden;
This will hide the element.
Note: Opacity and visibility does not remove the element.
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 have tried with like below which I searched from stackoverflow , but not working yet ! This is doing on riot.js so I link what I tried here .
I want to show .overlay div when hover on #over arrow down button but no display yet .
#over:hover + .overlay {
opacity:1;
}
#over:hover > .overlay {
opacity:1;
}
#over:hover ~ .overlay {
opacity:1;
}
None of those selectors work because div.overlay is neither a descendant nor a sibling to div#over.
To do what you want - with pure CSS, you would need to change the HTML structure a bit - in order to make the two div's siblings.
For example, adding div.overlay next to div#over would do the trick:
<h3>{Now} {opts.title}
<div id='over'>^</div>
<div class='overlay'>
<li>Editable</li>
</div>
</h3>
This would require following CSS rule:
#over:hover + .overlay {
opacity:1;
}
But this would require you to adjust the absolute position of div.overlay. I am leaving that to you.
Here's the updated plnkr: http://plnkr.co/edit/nSNn1t0Lpuw9uUZQ1N8h?p=preview
You need to change your HTML structure to achieve this in CSS and use ~ general sibling selector, like:
In HTML:
<div id='over'>^</div>
<div class='overlay'>
<div>Editable</div>
</div>
In CSS:
#over:hover ~ .overlay {
opacity: 1;
}
Have a look at the updated Plunkr.
Hope this helps!
Because two divs location are mixing up.. in mouse in/mouse out function.
try changing your css style of .overlay .
In CSS:
.overlay {
position:absolute;
background:#000;
color:white;
list-style-type:none;
right:30px;
top:18%;
opacity:0;
}
working example here: Plunkr.
also your css style float:right on #over may be problem of your mouseover function only work when u point very right of your div.
I am trying to create an effect where if a user hovers over an element, the element disappears. I have tried the code below, but it seems that the display:none; breaks the CSS. I am wondering why my CSS does not work, and how I would solve my problem.
http://jsfiddle.net/2c42U/
<div class="foo">text</div>
.foo:hover {
color: red;
display: none;
}
Try changing the element's opacity instead: http://jsfiddle.net/XtmVQ/
.foo:hover {
opacity:0;
}
try this instead of display:none
visibility:hidden
Try this:
.foo:hover {
opacity: 0;
}
What is your final intent for this?
as #Richard said, use opacity
also, to be backwards ie, do as follows:
filter:alpha(opacity=0); /* For IE8 and earlier */
and you can also add a transition:
transition: 0.5s
so that it is not instant.
You can do what the others suggested, use opacity: 0; or visibility:hidden;, but if you must have it hidden from the flow of the page. Then do the following:
Use a CSS like this:
.hidden{
display: none !important;
}
You can use the class hidden and apply it to any element to hide it. For the hover behaviour you want, you'll require JavaScript/jQuery to apply the class name. See http://jsfiddle.net/rkH7F/
i think css will not work. use jquery
UPDATE
ohh, my bad. css will work but the jquery will have a better effect
$('#outer').mouseenter(function() {
$("#outer").hide();
}); $('#outer').mouseleave(function() {
$("#outer").show();
});
FIXED
$('#outer').mouseenter(function() {
$("#outer").slideUp();
}); $('#outer').mouseleave(function() {
$("#outer").slideDown();
});
The following code shows the image in the div tag.
<div class='item'>
<img class='img' src="image1.png" alt="" />
</div>
I am using the following css to add effects to the html image code:
img{
width:50px;
height:50px;
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
I am using this to have opacity effects in css. With this code, the opacity effect works well when I hover over the image itself. But how do I make it so that the opacity effect on the image occurs when I hover over the div tag instead. I want to be able to hover over any part of the item div which encapsulated the image, to get the change opacity effect on the image. NB effect on just the image not the entire div. Can this be done in css? If so how?
Change this:
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
to
.item:hover img{
opacity:1.0;
filter:alpha(opacity=100);
}
This will change the opacity of the img when the div is in hover state.
If you use jquery for this then I think this will be easy
$('.item').hover(function(){ $('.img').css('opacity','1.0');}, function(){ $('.img').css('opacity','0.4');});
I assume you know jquery. You can't use :hover pseudo class of CSS over elements that don't have href attribute according to Sitepoint.