I'm making a theme for wordpress. My navigation bar has rounded corners like apple's site. I want to add a hover style to it, but I can't get it to hover with rounded corners, like apple's nav bar does. I'm using a big image for the background and using wordpress 3's menu system. So, how can I hover the first and last item on the bar? Thanks for helping.
With javascript you can select and change whatever you want but if you just want to use css, you´ll have to apply the :hover to the parent of all button sub-elements so that you can select all sub-elements using css. However, that excludes older versions of IE as they don´t support :hover on elements other than a tags.
Example:
.button:hover {
//
}
.button:hover .main_section {
// change to main section of button on hover
}
.button:hover .left_part {
// change to left side on hover
}
.button:hover .right_part {
// change to right side on hover
}
You'll have to have a different background image for the "hover" style.
Related
I am setting up my own website, and before I do that, I am working on understanding what I want to do following along with a W3 Schools tutorial.
When you click open, it brings up the overlay properly, and when you hover over the text in the overlay, the text changes color, but I want to make it so that when you hover over text, the background of the overlay changes to an image. As it stands the overlay color is gray, but when I hover over something say "dogs" I want the background to be replaced by a picture of a dog.
I have tried to use the CSS :hover function but was only able to have it change the background-color of the individual navbar element, not the whole overlay.
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
background-color: red;
}
This only changes the background color of the navbar element.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
Here is the link to the w3 schools tryIt site, to see the rest of the code.
In CSS you can not change the style of a parent element by Hovering a children element.
You will need Javascript.
I was able to figure it out, by using JQuery, and this is the code that ended up working for me.
<script>
$(".about").hover(function(){
$(this).parent().parent().css("background","red");
});
$(".about").mouseleave(function(){
$(this).parent().parent().css("background","blue");
});
</script>
So basicaly what is happening here is that I have a navbar, which has different links in it each with there own class (for example as you can see here "about" is one). And what I have JQuery do is when you hover over a specific element, it changes the background of the parent attribute.
Note I had to do .parent().parent() because of the way I have it setup, it may be possible to do it with just one .parent().
And then what happensis when you hover over the element in the class it will changed the css of the parent attribute, and then when you the mouse exits the element, the background will go back to what it was originally, so in this case blue.
I hope this helps anyone if they ever have a similar question!
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
Only my second question here (so go easy please!).
I've been trying to use jQuery waypoints to hide and show a border under my navigation based on scroll position.
For example whilst the sticky nav is over the slider image - there will be no border, however when the nav is scrolling over content, the border will appear.
Please see: http://thestylebar.co.uk (inspect element in chrome/safari)
Once the user scrolls to the waypoint the css property is changed however when the user scrolls back up the class doesn't return to its default state how can I amend this? Also, the script doesn't seem to work on the homepage?
$(function() {
$('.l-main-h').waypoint( // .l-main-h is the content area
function() {
$('.strip').css({"border-bottom":"none"});
}
)
});
http://jsfiddle.net/F5A3y/
You would have to test the direction that waypoints provides. Also, I wouldn't inline CSS like that. You should just toggle a class.
This isn't tested but it should get you close.
$('.l-main-h').waypoint(function(direction) {
$('.strip').toggleClass('bordered', direction === 'down');
});
Then your CSS would be like:
.strip.bordered {
border-bottom: 2px solid #fff;
}
I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:
(source: jankoatwarpspeed.com)
What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.
In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.
I guess I cant archive this with pure CSS, what would be your solution?
Thanks
Just disable pointer events on your overlay:
pointer-events: none;
Example:
http://codepen.io/anon/pen/ebcdz
See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.
http://jsfiddle.net/5Ux5t/1/
CSS for href within overlay div to make it invisible
#overlay a{
color:black;
}
Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:
http://jsfiddle.net/5Ux5t/
I'm currently working on my exam project, and I have this animated jQuery navigation.
I would like to make the text-color of the white, both when I have mouse over the itself AND when I have the mouse over the menu icon which is shown when you mouse over the <li> elements.
I have tried everything, but haven't found a solution for it.
Demo
Stylesheet
Example: If you have your mouse over Forside (text is white), and then take your mouse over the white house icon, you'll see that the text change from white to black. I want it to stay white.
NOTE: Dont mind the crappy colors or layout, lol, right now I'm just focusing on the menu.
Anyone has a fix for this, please?
Thanks in advance.
The answer above does work:
li:hover a { color: white !important; }
You could also surround the anchor tags with a div with a class of say, "target", and then target the div using jQuery to programmatically set a class with the color property set to white:
$('.target').hover(function(){
$(this).children(':first-child').toggleClass('className');
}, function(){
$(this).children(':first-child').toggleClass('className');
});
Something like that... but the CSS way is much easier :)
Wow, I didn't imagine this being such a hard task. The following might not be an elegant solution, but it works:
li:hover a { color: white !important; }