I would like to do something similar to what was posted here...
Make Twitter Bootstrap navbar link active
Except instead of an item on the navbar becoming bolded, I would like it to use another image when active. From this...
to this...
In the example link you posted, all they're doing is adding a CSS .active class to the active link. If you do the same and have the active class being added to the correct element, you can do something in the css like,
.active{
background: url('path/to/image.jpg') no-repeat;
}
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
I'm using http://stickyjs.com/ to fix a social share bar at the top of my website.
I got it to work as intended embedding this :
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js"></script>
<div id="sticker">Sticky</div>
But now I need to change the share bar color when said bar is "sticky": when element is not sticky, it should be #333, and when it's fixed, it should be #FFF.
I tried changing the css for #sticker(which is the ID for element to be sticky), and it obviously changed the color for both sticky and non-sticky.
Then I saw on this on the github page for the script:
className: (default: 'is-sticky') CSS class added to the element's wrapper when "sticked".
Looks like what I need here, but I can't manage to use it.
Any help please ?
Like it add the class is-sticky to your existing class you have to use the css keyword !important to overide the background you already define :
.is-sticky {
background-color:#FFF !important;
}
I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.
I have implemented a slider (http://pgwjs.com/pgwslider/) for a client but his requirements are that if a user clicks the image on the current slide, then that image should re-size automatically to a bigger size and on second click it should get minimized to original size!
How can I implement this function??
You can use toggleClass function of jquery to apply class on first click and remove class on another click. In the first click apply active and set size on this active class in css.
$('slider img').click(function(){
$(this).toggleClass("test");
});
CSS
.test {
height:100px;
width:200px;
}
You can try like this please update classes name
$(document).ready(function() {
$('.pgwSlider').toggleClass('.larger');
});
...where '.larger' is a CSS class that makes the slider larger perhaps?
Or if you wanted to make just the image bigger rather than the whole slider, you could use jQuery to make the image appear and disappear again, by changing its CSS Visibility property.
The HTML will be like this
< img src="/resources/pen.png" id="pen" class="small"/>
the css will be like this
img.small {
width: 100px;
}
img.large {
width: 500px;
}
The jQuery code will be like this
$("img#pen").click(function(e) {
$(this).toggleClass("large");
$(this).toggleClass("small");
});
JSFiddle