idI have these links on a page:
<div>
Item 1
Item 2
Item 3
</div>
I want to add a hover feature using css so that when a link is hovered over a image specific to that link appears as background image in the container div. I'm fairly new to jquery and js but I'd prefer a pure css solution if possible.
You have the answer to this question in your post: hover The CSS would be this:
#eq1:hover {
background-image: url ('../link_to_file.png');
}
jQuery:
You can do that in jQuery. But to do that in jQuery would be this, and also, do you have an image? I will tell you how to link the image. Use your image for that.
Example:
$(document).ready(function () {
$("#eq1").mouseover(function () { // function to run, when mouse comes over eq1
$("div").css("background", "image_image_link.png");
}
});
Instead of using div you can use (this).parent too because you said, you wanted the image to show up for the parent div. You can repeart the code for all of the three links.
Note: You cannot add CSS properties to some other divs in CSS, for that you must use jQuery.
Edit:
You wanted to add the images in some other div. That would be something like:
<div class="all-images">Add all the images here..</div>
<div class="image-viewer"></div>
Now what this actually is something like this: The .all-images is the container, that will contain all the images like thumbnails. And the .image-viewer will be used to show the image.
$(document).ready(function () {
$(".all-images").click(function () { //
$(".image-viewer").css("background", "image_image_link.png");
}
});
In the example I used, the click on the the image (.all-images) will show the image in the div. But remember to use something like a name of the image. Because jQuery won't remember which image was clicked. You can use something like src of that img.
try this
div:hover #id1{
background: white url('path/to/image.png') no-repeat top left;
}
Related
http://exrx.net/concrete5/store/low-volume-progressive-intensity-weight-training
http://exrx.net/concrete5/store/low-volume-progressive-intensity-weight-training-1
Here are my website link. I have translate this button on pages. When I hover on translate this button, the language section is shown 50 pixels below.
How can I add css dynamically that add top position to language section. Right now I am using below css
.ttb-panel { top: 235px !important; }
This only works when one div with class .ccm-custom-style-adstop (Advertise after page title ) is not there.
I have given both page link.
What CSS rule will work?
$("# TRANSLATE BUTTON ID").mouseover(function(){
$("# TRANSLATE DIV ID").addClass("ttb-panel");
});
I want to have the background color stay after I click on the div.
This div is linked to target another div.
<div class="barbutton">ABOUT</div>
here is the CSS of the div i click on
.barbutton:hover {
background-color: #7BDFBE;
}
so I want the background color to stay when its clicked.
I think what you're trying to achieve is the normal link behaviour i.e. it changes colour and stays that way to indicate it has already been visited. If yes, then you're approaching the problem the wrong way in CSS.
Instead of putting the CSS on a new DIV inside the <a> tag put the CSS on the link itself.
<a class="barbutton" href="#aboutbody">ABOUT</a>
Then use the link states in CSS as below:
a.barbutton:visited {
background-color: #7BDFBE;
}
a.barbutton:hover {
background-color: #7BDFBE;
}
Similarly, add the other links states you require.
To maintain state like you are wanting, I would suggest using some javascript/jQuery.
Javascript:
<div id="barbuttonid" class="barbutton">ABOUT</div>
<script type="text/javascript">
document.getElementById("barbuttonid").onclick = function() {
document.getElementById("barbuttonid").className += " clicked";
};
</script>
jQuery:
<div class="barbutton">ABOUT</div>
<script type="text/javascript">
jQuery('.barbutton').click(function() { jQuery(this).addClass('clicked'); });
</script>
CSS:
/* anchor tags are inline and cannot contain blocks elements like divs */
#aboutbody {
display: inline-block;
}
.barbutton:hover {
background-color: #7BDFBE;
}
.barbutton.clicked {
background-color: #7BDFBE;
}
Now when it is clicked, the additional class will be added and the CSS style can make the background persist for you.
EDIT/NOTE:
Ravi's answer is better as it does not use javascript. If you kept the HTML layout as you have it, the CSS declarations would have to be:
a:hover .barbutton {...}
a:vistied .barbutton {...}
Also, this way will make the style persist as long as the browser remembers that the link has been visited (user comes back in 3 days and the background color may still be persistant). My way above will not keep the background as soon as the user refreshes or leaves the page. I guess it depends on what you are going for.
I want that on hover of image, div box should appear and user can select a option from that div.
<a class="show_img3" href="frequenz?link=3" class="btn">
<img style="padding-top: 8px;padding-bottom: 26px;" src="<?php echo bloginfo( 'template_url' );?> /img/bouquet/2.png">
<span class="bqy_no">BRAUCHE MEHR</span></a>
<div class="hide_img3">3</div>
My problem is that I am not able to select a option as it disappears if i try to hover.
here is the js fiddle
I have updated the fiddle to be more accurate what is needed.
try this fiddle
just placed a parent div and applied a extra class to it.
Your Html and css its very untidy and non-semantic please make it readeble.
I just tested this and it works:
$(document).ready(function(){
$('.show_img3').hover(function(){
$('.hide_img3').show();
});
$('.close a').click(function(){
$('.hide_img3').hide();
});
});
You have to click the X to hide it after it's open.
Updated it for you:
http://jsfiddle.net/m3qLx/7/
Do it with jQuery instead. There you can easily say that once the user hovers over the link/image, the div stays.
Here is how it works:
$('.show_img3').mouseover(function(){
$('.hide_img3').show();
});
You should use jquery
http://jsfiddle.net/m3qLx/8/
I would solve this using jQuery.
If I understood correctly, then div with class hide_img3 is invisible, but when I point on img which is in a tags, then div becomes visible, yes?
For that, You can use this code.
$('.show_img3').hover(function () {
$('.hide_img3').fadeIn(1000);
}, function () {
$('.hide_img3').fadeOut(1000);
});
"it disappears if i try to hover"
If you want to go with plain CSS, you need an underlying wrapper, that holds both, the anchor and the div. If the hover-state is applied to that wrapper, the box will stay open.
I am using toggleClass and slideToggle to accomplish the following:
when the user selects a link, it will slide down the div, then it will set the link as open, displaying the appropriate background image, this is just a simple, (+) and (-) to open and close the div.
What I am having trouble with, is displaying the background-image to the right of the link, giving it about 5-10px of margin-left, to give it some spacing.
Here is a screen shot of what it is doing: Closed (displaying (+) sign): http://cl.ly/4634afa1e7aa4fe10072
Open (displaying (-) sign): http://cl.ly/8bc59ab07da46a173d62
HTML for link: Mapping Our Future: Strategic Plan 2010-2015
CSS for when it displays the link untouched, and after it is selected:
// link is not open
.our-future-intro-slide {
background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}
// link is open
.our-future-intro-slide-open {
background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}
Here is the jQuery, I figure I'll throw that in, it works, just the css for making the background-image show up to the right of the text.
$(document).ready(function() {
$('.our-future-intro-slide').click(function() {
$(this).toggleClass("our-future-intro-slide-open");
$(".our-future-intro").slideToggle(100);
});
});
Try this:
.our-future-intro-slide {
background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
padding-right: 30px; /* or whatever the width of the background image is */
}
And, of course, the same modifications for the other rule.
I don't know if I understand totally, but have you tried using :after? Something like
.link:after{background:#FFF;}
I think you will be interested in this post - Pure CSS "Popups".
UPDATE: that's another way to align images on links hover.
When I have an <a> tag set to a specific image background like this:
HTML:
Click Here
CSS:
a {
background: transparent url(button.png);
}
and I want the background to change whenever a user hovers over the spot, like this:
CSS:
a {
background: transparent url(button_HOVER.png);
}
The hover background image flickers (takes about 1-2 seconds until it fully loads) when a user hovers over the link.
I could save the file as GIF and minify its size and loading time, but that would harm my specific image tremendously (it's big and highly graphical).
That's why I was looking for a better solution, such as perhaps counting on the browsers ability to cache images. Hence would I apply a style to a button like this:
CSS:
a {
background: transparent url(button_HOVER.png);
background: transparent url(button.png);
}
So that the image button_HOVER is first cached. It has seemingly affected the "flickering", but not completely. I thought of maybe creating a hidden tag with the HOVER image, so that maybe the result would be different.
Do you think there's a better way to solve it? (I emphasize I want to keep the file as PNG, it weighs 6-7k). Is my method efficient?
Your solution would be to put both images (hover and active) in the same image file. Positioned on top of each other. Also known as Image Sprites. The browser will load the entire image file. On hover, you just change the background position.
Assuming the active image is at the top, and the hover image is positioned directly below that..your css code would be something like:
a.link {
width:70px;
height:24px;
background: url(image.png) top no-repeat;
}
a.link:hover {
background-position: bottom;
}
Notice background-position. Here I use top and bottom. You can specific exactly in pixels too. The entire image in this example would have a width of 70pixels and height of 48pixels. Some sites put all their small icons into one image. Loads altogether, save on requests too. :)
No need for preload scripts in this case.
The basic options available are to use an html element that's hidden from the viewer, or use javascript.
The html approach is probably the simplest, though:
<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>
with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }
or, with javascript:
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
the jQuery approach was lifted in its entirety from this page: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript.
Though the best approach would probably be, as Lyon suggests, css image sprites.
You should search about this topic "preload images" You will find ways to preload images using css and javascript.
I believe that if you put a hidden image with source equal the src of png images you will use in the css files, this will make the images loaded when the page loads, and CSS work will be just switch preloaded images.