I'm setting a map up for when you hover the little orange circles, a fish will come up.
Example can been seen here, http://www.simagine.nl/kaartje
However, if you hover the far right circle, little above Australia, the hover itselfs keeps flickering and therefor the image keeps flickering also.
The CSS for this is:
a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;
}
a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;
}
Think it's a silly answer but i can't find it...
Regards
The rules in a.tonijn:hover changes the area for the a element.
You need to add a child element to you a-tag and apply the background image to that element instead.
Try this:
Tonijn<span></span>
/* Selector changed */
a.tonijn:hover span {
background: url(tonijn.png) no-repeat;
height: 83px;
width: 106px;
top: -83px; /* Value changed */
left: -26px; /* Value changed */
position: absolute; /* Attribute added */
display: block; /* Attribute added */
}
When you hover you are changing the styles for the anchor tag. I would suggest creating a div that is set to 'visibility: hidden' then on a.tonijn:hover set that same div to 'visibility: visible'
Try giving a border to your link and see it's too small to be hovered, so increase the size, see the red border I have made, I just increased the height and width of your link like
height: 20px;
width: 20px;
And place it correctly around your orange circle in such a way that orange circle comes in the center of the box, and than you are good to go
Related
I'm trying to make a box which expands into four boxes (which are also links) when you hover over it. To do this I have 5 boxes. One which acts as the parent box and contains all others, one which expands on hover, and the other three which are in the second one positioned to opposite corners. My problem is that the second box has to be over the others for the hover to work but then the user can't click the buttons below it.
Here's an abbreviated version (CSS then HTML):
#sidebar {
height: 100px;
width: 100px;
position: relative
}
#sidebar #container {
height: 100px;
width: 100px;
transition: all 2s;
}
#sidebar #container:hover {
height: 200px;
width: 200px;
}
#sidebar #container #button1 {
height: 100px;
width: 100px;
position: absolute;
right: 0;
z-index: -1;
}
/* Repeat with two buttons positioned to bottom corners */
<div id="sidebar">
<div id="container">
<div id="button1"></div>
<!-- Repeat buttons again -->
</div>
</div>
I'd rather not use anything but CSS and HTML, but if it's the only way I'll be open to it. Jsfiddle here.
EDIT: I fixed the jsfiddle with idrumgood's solution.
It's your negative z-index that's causing the issue. That places it behind everything else.
You need to add this style to your links:
a{
display:inline-block;
}
And adjust the size of the second link. Try it and tell me! :)
You can add the hover effect to your sidebar instead and changing the visibility of your buttons,as well as removing z-indexes http://jsfiddle.net/4zLjas39/12/
#container a div{visibility:hidden;}
#sidebar:hover #container a div{visibility:visible;}
You can allow clicks to pass through an element by setting it's css pointer-events to none
#the_invisible_object{
pointer-events: none;
}
I got an issue while hovering an image. i need to overlap the image with bottom section.
heres the link
http://hg01.ispghosting.com/techashram/UIDev_Inhouse_2014/Vivekraj_KR/Html5/BibAndTucker/index.html
If you remove the "border" off your li-tag and put it on your add_product.hover_visible then add some css to it perhaps something like this? Hope this will point you the right way:
position: absolute;
left: 0;
top: 0;
display: block;
border: 1px solid red; /*This would be your shadow box effect*/
height: 350px; /* Probably set a different height here that works better */
margin-top: 0; /* This was just to remove a CSS rule you had */
It requires your li (or any close parent to this tag) to be position: relative; but when i entered these rules into your page it seemed to get an effect that was half way there to what you want I think. Good luck!
I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.
<body>
<div id='backgroundContainer'>
<div id='background31'></div>
</div>
</body>
CSS:
html, body {
max-height:100%;
width: 300%;
background: url('background.png');
top: 0;
left: 0;
background-size: cover;
background-repeat:no-repeat;
}
#backgroundContainer {
top:0;
left:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#background31 {
top:45%;
position: absolute;
margin:0;
padding:0;
background: url('alure.png');
background-repeat:no-repeat;
height:55%;
width:70%;
left:230%;
background-size: 5%;
}
#background31:hover{
background-size: 7%;
}
I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.
You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.
If you add an image to the nested div, and apply the hover effect to this image it should work.
<div id='backgroundContainer'>
<div id='background31'>
<img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
</div>
</div>
and the css
#testImage{
width: 100px
}
#testImage:hover{
width: 150px;
}
See also: http://jsfiddle.net/2CbTX/1/
Update
Added a link to the image, see: http://jsfiddle.net/2CbTX/2/
because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .
see here : http://jsfiddle.net/Pda5e/
your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.
Resize the div to make it smaller and increase the background size to fill the div
so if you have to make the hover only affect the image, you must give the hover to image only.
like here : http://jsfiddle.net/Pda5e/1/
Try replacing this code
#background31{
background: url(maxresdefault.jpg);
background-repeat:no-repeat;
height:50px;
width:100px;
background-color:#066;
background-size: 5%;
}
#background31:hover{
background-size: 100%;
}
The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.
So you should use background-size: 100% and change the width of the background31 element.
#background31 {
background-size: 100%;
width: 5%
}
#background31:hover{
width: 2%;
}
But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.
I have a map with several divs positioned absolutely on the page. Each div has a background image which contains the normal state and the hover state in one file. When the user mouses over the div, the background image is supposed to shift up 25 pixels. In ie7, the background image shifts up 25 pixels, but it also shifts to the right about 20 pixels.
Here is the CSS:
#LosAngelesButton {position: absolute; top: 80px; left: 168px; background: url(../images/superNav/LosAngeles.png) no-repeat; height: 27px; width: 110px;}
#LosAngelesButton a {display: block; height: 27px; width: 110px; text-indent: -99999em;}
#LosAngelesButton a:hover {background: url(../images/superNav/LosAngeles.png) no-repeat 0 -25px;}
The problem is showing only in ie7. Any suggestions?
I think you have this problem in other browsers to. you have set the background image on #LosAngelesButton and you change the state when you hover the a inside this element whatever it is. I would suggest you set your original background position on a element.
post the HTML code of this LosAngelesButton and i can give you a more precise awnser
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.