In Chrome, when I hover over a certain div, adjacent divs are moved to the left by 1px. When I click the div I was hovering over, the adjacent divs are moved back into their original position.
I'm wondering what's the best method of figuring out why this is happening? I've inspected the pertinent divs in inspector and can't see any reason why it's happening. Is there something inherent to Chrome that I'm missing?
Issue can be seen here by hovering over the "Filter" box in the Office column.
Fiddle that's throwing a few errors.
EDIT: Once I enable "Show paint rectangles" and hover over Filter, a div (shown in green) looks like it creates that little gap where the red arrow is:
This is your tag:
mytag {
text-decoration: none;
color: #5695F3;
}
Use display:inline-block on hover will make not move other divs on hovering you element.
mytag:hover {
color: #00287D;
text-decoration: underline;
display:inline-block;
text-indent:0px;
}
Hope this helps.
Found out that it was select2's CSS that causing the issue. One of the div's overflow:visible was pushing other divs outwards.
Related
I have a series of 50% width elements that are next to each other, and I want to give each of them a 20px white border to separate them, the reason for this is that I have a responsive layout and I always want there to be 40px white space in between the elements.
I have a hover effect over them too, but when you use border on the main element, when you hover over the border or outline, you trigger the hover effect, which I don't want.
http://jsfiddle.net/keleturner/6PqJt/
Try hovering on the red border and outline (outline you need to hover in between the two blocks to trigger hover).
The only solution I found was to add a new element to wrap everything inside the .main and give it a border there, but that is very non-semantic and having to extra markup for something like this doesn't seem right.
the line
.main:hover .inside { background: blue; }
is wrong, it should be
.main .inside:hover { background: blue; }
http://jsfiddle.net/6PqJt/5/ EDIT - updated fiddle to fix bottom .main - also added some css to fix the hover of the second one
Live link here
http://soloveich.com/pr1-1/
For some reason, div hover changes only when mouse goes over the part, that's on top of the grey content background.
When it hovers on lower part- nothing changes
<li><a class="ml" href="http://soloveich.com/pr1-1/?page_id=66"><div class="tabs1"><div id="t1">
</div></div>
</a></li>
css code
#t1 {
height: 519px;
width: 271px;
background-image: url(images/t1.png);
background-repeat: no-repeat;
}
#t1:hover {
background-image: url(images/t1r.png);
}
didn't put all 4 of them here, since it's all the same
#cnt1 element is over the divs, and block the hover action.
You must play with z-index, and positioning... Two less reputation to make a comment, sry :).
UPDATE
Sorry, now I'm not sure about that. But You should try to run tFirefox, right click this div, run inspect element and then click the 3D view icon (top right). Then everything should be clarified.
OK I know
You must apply the hover effect to the first child of the whole thing. Div is inside a, a is inside li. So li:hover is an answer I think. The background should be also applied to the li element. Hope it helps.
I have three divs, one hidden:
Parent
Message (hidden)
Image
I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.
I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.
I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).
Here is the js fiddle. If you have any alternative approach please tell me.
EDIT: This is a example image of how it should work. It should also float and scroll with the page.
Switch the position of elements as mentioned in your style.
This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”
Demo
css
#img:hover + #msg {
display: block;
}
#Html Snippet
<div id="img">
<a href="some link here">
<img src="http://j.mp/18xsrJQ"/>
</a>
</div>
<div id="msg">
This should appear if icon is hovered.
</div>
To illustrate this:-
Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.
<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>
h3 +p {
color: gray;
}
I'm trying to get the bottom blue border to disappear on :active. The persistant border is tied to the background div but it's not going away when the hyperlink is active even though the hyperlink has no bottom border.
Here is a fiddle of the project:
http://jsfiddle.net/ajrdesign/cTKnn/5/
Anyone know why this background div is appearing above the other elements?
Figured it out. I had added border to the ul li element and not the li element. So the :hover and :active were simple adding another border on top of that one. Changed that and it worked great!
http://jsfiddle.net/ajrdesign/HgnwG/
H3LLO,
For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.
Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.
To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.
Any ideas on how to get rid of a element's extra bottom padding?
Thanks
Adam
add vertical-align:bottom; to your img css properties.
a {display: inline-block}
img {display: block}
Images are rendered inline by default and you need to add display: block or vertical-align: bottom to fix the issue.
The only working way for me is to "remove" the margin is wrapping the image with div and set the size of div exactly the same as the image.
<div style="width:64px; height:64px">
<img src ='image.png' style="width:64px; height:64px" />
</div>
I'm not positive why it occurs, but you could try YUI Reset to fix it.