There is a navigation menu near the top of http://eaglesflight.sites.hubspot.com/conference for which I would like to have the parent items (TRAINING, COMPANY, RESOURCES) have transparent backgrounds, while maintaining the current opacity of the children on hover.
Essentially, I want to be able to see the background image behind the parent items of the navigation as opposed to the solid colour that is currently there.
I'm an amateur, tasked with doing some web development at work. Any help is greatly appreciated.
Remove background: #1d3d6f from the .nav-menu li and add it to .hs-menu-children-wrapper
for the hover, remove background: #fff from .nav-menu a:hover
If you don't set a background-color, you'll see whatever is behind the element.
...while maintaining the current opacity of the children on hover.
So seems like you already tryed to set a opacity to the element:
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children
{
position: relative;
opacity: 0.8;
}
Now indeed, the child elements also have this hover. This is because the parent element is "stronger". You can just re-adjust the opacity on hover:
.hs-menu-item.hs-menu-depth-1.hs-item-has-children:hover
{
opacity: 1;
}
jsFiddle
Note The COMPANY is not semi-transparent, because it has no child element. You can change this if you want by including the element with no children to the semi-transparent opacity
Hope this helped you :)
Related
I have a portfolio site here:
http://mrliger.com/index2.php
I have an issue whenever I hover of the menu li elements on the left side. The hover state changes the background color of the li to a darker grey but at the same time covers the arrow just to the right of the menu item. I'd like the arrow to always be visible. I've tried using z-index but no joy. Any suggestions?
The z-index property only works on positioned elements (position:absolute, position:relative, or position:fixed). This simple CSS should work for you:
.topnavi {
position: relative;
z-index: 1;
}
OR:
.arrow-up {
position: relative;
z-index: 1;
}
Note: For future questions, it's better if you add the code here instead provide a link.
I am trying to construct a chunk of code that is an image and a text caption, which is a single anchor. the image is an image tag and the text is in a DIV tag.
When the anchor is hovered, the image+text box has a border appear, and the text div transitions between text to then show the background image (using opacity 1 to 0)
USING CSS ONLY
My issue is that I can't seem to find the best CSS to write this code, what I have is:
HTML:
<div class="outerCCBox">
<a href="*url*" >
<img src="images/logo/clarityTeeth.png" alt="">
<div class="clarityUnderBox">
<div class="clarityBox">
Clarity Makeup
</div>
</div>
</a>
</div>
The "clarityUnderBox is a presized box containing the background image that appears when the covering text fades out on hovering over the anchor tag.
CSS:
.clarityUnderBox {
width:256px !important;
height:86px !important;
background:url('../../images/logo/Clarity-C-320.png') no-repeat;
background-size:contain;
}
.clarityBox {
width:100% !important;
height:100% !important;
background-color: #000;
opacity:1;
color:#f0f0f0;
transition: color 0.4s linear,opacity 0.6s;
}
All CSS is simplified for this question (fonts, transition -types- etc removed).
The issue I am having appears to be with the next piece of code, the "hover" element:
.outerCCBox a:hover > .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
EDITED CSS:
originally
.outerCCBox a:hover .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
which behaves in the same way, as with the ">" selector.
The issue is that the hover works fine when hovering over the anchor element but when moving away, the .clarityBox class doesn't return to it's pre-hover state.
1) How do I make this return to it's pre hover state?
1b) Do I need to make a separate ~ a:not-on-hover CSS declaration?
2) How can I tidy up and make the "hover" CSS line more specific? - the way I've done it above works, but I'm sure there's a better syntax to it. I have tried things like using "*" and ">" selectors with limited success (combined with some rearrangement of class orders in the HTML)
Thanks for your guidance.
EDIT:
As requested, a fuller fiddle is here:
http://jsfiddle.net/gwrrezys/9/
But this fiddle doesn't show the image above the text, but it does replicate the general issue with the hover not updating / or not returning to its original state.
cheers
SOLUTION:
As suggested in comments by Martin, making the anchor a block element fixed this issue, I have retained the issue in the jsFiddle for reference and can be found by repeatedly hovering and then hovering off the anchor area.
Your actual problem is with the hovered parent (your anchor element) not having a width set.
If you make the anchor a block element it will fix the "leaking" content issue. by either
making the anchor display: block with set width and height
or making the parent fit the content by making it display: inline-block
DEMO
General to displaying children on hovered parents:
As soon as you extend a child of a :hover element over the whole screen (100% width and height) the parent will stay in the hovered state as long as you are hovering over the child.
To get around that you need to break the child out of its parents flow ... for example by making it's position: fixed (or position: absolute if the parent has no position: relative).
For example by using something like this on the child - and the z-index: -1; here makes sure it moves behind the parent:
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: -1;
DEMO
Or (depending on what area exactly you wan to cover with the child) you can alternatively extend the child only over a particular hover area (e.g. its parent) ... here you would then use position:absolute on the child and position: relative on the parent (to make sure you keep the child in the parents flow).
DEMO
A quick read on positioning elements: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I want to know what plugins is used on to chanege the color of image or make image response on mouse over.
I am new in wordpress can anyone give me the list of best plugins.
I am editing this theme:
http://themeforest.net/item/overgrowth-retina-responsive-multipurpose-theme/full_screen_preview/4896083
Please check this theme, in Homepage Scrolldown the page the "BLOG" Section will come
Please put mouse over the image then image will response.
I am looking for this.
I purchased this theme and I am editing it but I am not able to do this feature.
And I do not know this name what it says so I am not able to search on internet.
So please tell me what I will search what this say in WordPress. How can it be achieved via code or via plugins?
Does my overgrowth retina theme have this plugins?
Any Idea or Suggestions would be highly welcome.
This effect is being achieved with CSS3:
1] It's setting border-radius:100%; of the image container to change the image from a square to a circle.
2] It's also displaying two hidden elements over top of the image for the blue semi-transparent overlay. These are being set to opacity:0; for their default state, and then on :hover, they are being displayed using CSS transition.
3] They are using CSS3 transitions and trandsforms to deliver a smooth animation rather than the CSS styles just snapping into their :hover state.
Image Container :hover CSS:
.blog.blog_layout5 .span3 .post_grid_image a:hover > img, .blogging.post_grid .column.span3:hover .data-image > img, .blogging.post_grid .span3.four_column:hover .data-image > img {
border-radius: 100%;
transform: scale(1.08, 1.08);
}
Semi-Transparent Blue Circle Overlay :hover CSS:
.blogging.post_grid .span3 .preview_info_wrap, .blog.blog_layout5 .preview_info_wrap {
border-radius: 100%;
transform: scale(1.08, 1.08);
transition: opacity 0.2s ease 0s;
}
Icon Container Overlay (The Icon on top of the Blue Overlay) :hover CSS:
.blogging.post_grid .span3 .preview_info_wrap, .blog.blog_layout5 .preview_info_wrap {
border-radius: 100%;
transform: scale(1.08, 1.08);
transition: opacity 0.2s ease 0s;
}
As I understand it, CSS can be used to change the content of an element on :hover in a basic way. I am using this code
HTML:
<button><span>3 replies</span></button>
CSS:
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
but when I hover over the button, it twitches very badly
I want mine to be smooth like the music player at this link
When you hover over one of the buttons under lease, premium, or trackout price, they switch over to the +add text
here is part of my player http://djwckd.com/test
The important thing is to make sure that your layout does not change on hover. The easiest way to achieve this would be to allocate some space in your layout for all of the parts even when not hovering. I'm not sure what sort of layout you are trying to achieve but here is an example:
button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}
By giving the :before pseudo-element a size even when it's not hovered the layout shouldn't change when the content changes. You may need to adjust this for the specific layout you want but the general principle is to make sure all of the size-related properties are specified without :hover and then only adjust non-layout properties (that is, properties that don't affect any box sizes) in the :hover state.
As you provided the link is hovering the background images but in your test link you have given background images before to <a> elements, if you want exactly same as link use background-image: url('image1'); to a and background-image: url('image2'); to a:hover.
You can still use positioning the background-images, for this you should have like this.
+--------------+
| | position this background to a
+--------------+
| + Add | position this background to a:hover
+--------------+
Ok! for this make your background 64px width and 32 px height.
then position your background to
a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}
now position your background to
a:hover{background-position: 0% 0%;}
I think I have a solution. The trick was one main thing: setting the width of the text's container. I also used onmouseenter instead of onmouseover for faster text change (my theory that onmouseenter is faster then onmouseover). Here is an example:
var videoplayer = {
text: "<b>Hello World</b>",
author: "(you)"
}
<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>
Just make sure you set the div's width to the width you need. (If you don't want a background, just change the part that says background-color: red to background-color: transparent). One more thing: you have to use a div or other container with display:block set as its default. I suggest using div. Hope this helps!
I have a background on an div element with position top. Now this background spans across multiple li floats (progress indicator).
div.myListingProgressWrapper{
width: 807px;
height: 39px;
background: url(background.png) top no-repeat;
}
ul.fiveStepProgress li a{
float: left;
}
Now I would like to apply an active state to the a class and move the background of the parent container to bottom as the background contains a different colour and a progress arrow.
My question is, can I move the parent container background to bottom by applying the active class on the child a link?
Cheers
You cannot select a parent from within CSS. There have been several suggestions to the W3C on how to do this over the past few years, but the performance concerns have shot everything down. Plenty of reading on this, here's a link: http://css-tricks.com/7701-parent-selectors-in-css/
You're best off setting the a class on the parent, which affects the child... since you can't do it the other way around without javascript anyway.