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.
Related
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.
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 am working on a project http://www.node.au.com/ The problem that i am facing is that i have a logo image around which there is an anchor tag, but when i hover over logo it applies only on the area on left side but not on whole image i searched a lot for the solution but no luck can any one send me the solution.
kindly hover mouse on left side of image and see the issue many thanks in advance.
here is the code:
<img style="margin-left:-17px;margin-top:20px;"src="http://www.node.au.com/wp-content/themes/folio-two/images/main-logo.png" alt="NODE – 3D Visualisation">
2 things:
1. add "display:block;" to the tag, this will allow it to be as large as the image within.
2. The (menu) is covering it, making it unclickable. Remove the margin-top: -130px, and you'll be able to click it fine.
I have no idea why there's all that space at the top of that UL, though. It looks like you don't need a UL, in any case, and can just use a div, since there's only one li element within it.
-Julian
use this class on logo image
.logo {
cursor: pointer;
display: block;
margin-left: -17px;
margin-top: 20px;
}
I have a navigation bar, and underneath a black div on which the drop-down elements from the navigation bar drops. This is not the main function of the black div. It is just for design, but it works really well. You can see here what i am talking about: http://www.ecoloc.ro/interior/test/regeneration . Now, what i want to do is that every time a main element from the navigation bar is hovered, an image big enough to cover the main element and a part of that black div beneath it will appear. You can see in the link that i posted, on that black gap i want the image. Can this be done?
Thank you!
You can change the dimensions of the <a> inside the <li> and set a background image for it. If you don't want the main menu word to appear, you just set `text-indent: -9999px´ on ´:hover´ (image replacement technique).
The best way to set the modifications on hover and come back to normal on hout is to create different classes with the styles. So you change the class via JavaScript on hover, changing the dimensions automaticaly.
Since you already use absolute positioning for your "submenu" list, you should be able to do it with a little CSS.
Provide a background-image: for the list element that contains your desired graphics, set background-repeat: no-repeat, set an absolute height: and re-position your list to the correct top:, left: corner. Use margin: and padding: to get the list elements into their correct position.
-- Update: --
Try the following quick and dirty first sketch to see if I got the idea:
<ul id="media" style="position: absolute; top: 108px; left: 1018px; height: 35px; background-color: red; padding-left: 131px; padding-top: 35px; ">
<li>presa</li>
<li>video</li>
<li>foto</li>
</ul>
The submenu covers your main menu entry and the black submenu bar. Provide an image that covers exactly the areas you want and fine tune the positioning.
Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}