My problem is as follows: I have a clickable div with a background-image that changes (the image) on :hover.
This div kind of represents a menu button. When the div is pressed a script is executed that changes the background-image too.
However, I want the hover to still work after running this script. I have read about the style priorities and that I should use !important with the hover. I have used this before without problems, but for some reason the hover doesn't work, even with !important. Does this have something to do with background-image, can't this be combined with !important?
The div:
<a href="#" onclick="open_Thema(1);">
<div id="venster_Links_Menu_1">
<div class="venster_Links_Menu_Tekst">Introductie</div>
</div>
</a>
The css:
#venster_Links_Menu_1 {
margin: 0;
height: calc((100%/6) - 1px);
border-bottom: 1px solid white;
width: 100%;
background-image: url(images/Thema_1_Half.png);
background-size: cover;
position:relative;
}
#venster_Links_Menu_1:hover {
background-image: url(images/Thema_1.png); !important
}
And the script:
<script>
var themaOud = 0;
function init(){
}
function open_Thema(themaNieuw){
if (themaOud != 0)
{
document.getElementById("venster_Links_Menu_"+themaOud).style.backgroundImage="url(images/Thema_"+themaOud+"_Half.png)";
}
document.getElementById("venster_Links_Menu_"+themaNieuw).style.backgroundImage="url(images/Thema_"+themaNieuw+".png)";
themaOud = themaNieuw;
}
</script>
The correct way to write an important would be
!important;
not
; !important
Notice the placement of the semicolon.
Related
Quick question. I'm using jquery to target the "src" attribute of the logo on my website. So when the navbar shrinks (on scroll) the logo changes to a lighter version of the same image.
This worked PERFECTLY when I was making the site locally in HTML. It even worked perfectly when I uploaded the HTML to my web-host. However as I've started to move my site into a Wordpress theme, there is about a second delay in the image switch over. I was wondering If someone could take a look at my site and tell me what the problem might be? - Like I said, it was working perfectly locally and uploaded as plain HTML. Do I need to somehow preload the second image in jquery?
My URL is: http://iwebyou.com.au - Scroll down and notice when the navbar shrinks, there is a delay in the logo switching over. Also please ignore the rest of my website, its unfinished and everything else is a complete mess right now haha..
Cheers
Without seeing your code, it's difficult to help further, but IMO the best solution would be to set the logo as a background-image via CSS classes and then change the css class with javascript when needed, rather then modifying an image src attribute.
<div class="logo logo-dark">Company Name for SEO</div>
and
<div class="logo logo-light">Company Name for SEO</div>
css:
.logo-dark {
background-image: #fff url('path to dark logo') no-repeat center center;
}
.logo-light {
background-image: #fff url('path to light logo') no-repeat center center;
}
.logo {
// common logo styles
}
Here's an example using opacity and transition:
window.addEventListener('scroll', e => {
const nav = document.querySelector('.nav');
if(window.scrollY > 50) {
nav.classList.add('dark');
}else {
nav.classList.remove('dark');
}
});
img {
width: 200px;
position: absolute;
top: 0;
left: 0;
transition: all 500ms ease;
}
.light {
opacity: 0;
}
.nav {
background: white;
position: fixed;
top: 0;
height: 60px;
width: 100%;
transition: all 500ms ease;
}
.nav.dark {
background: black;
}
.nav.dark .dark {
opacity: 0;
}
.nav.dark .light {
opacity: 1;
}
.content {
height: 1000px
}
<div class="content">
<div class="nav">
<img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/cropped-I-Web-YouDark-2.png" class="dark" />
<img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/I-Web-YouLight-2.png" class="light" />
</div>
</div>
I currently have a white SVG logo that I am using as my website is mostly dark backgrounds. However, I do have a section that is white so I am looking to change the colour of the logo to black while scrolling through the white section.
Here is a copy of the logo code and white section:
<!-- Logo -->
<div class="logo" style="display: block;">
</div>
<!-- About -->
<div class="scrollview about">
<div class="col-sm-3">
</div>
</div>
Here is my current styles:
.logo {
position: fixed;
top: 0;
left: 0;
margin: 20px;
padding: 2.8em 2.8em;
z-index: 9;
}
.logo a {
width: 95px;
height: 16px;
display: block !important;
background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
background-image: none,url('../img/logo-light.svg');
}
.about {
padding: 12.25em 10.25em;
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: auto;
z-index: 3;
}
I'm not sure if it can be done using only CSS, but if someone can even point me towards a plugin or script it would be much appreciated.
Thanks
You can't use CSS like that to change the style of an SVG that's in a separate file. CSS rules do not cross document boundaries.
To style the SVG, you would need to need to inline it in your HTML page.
Assuming you made that change, then you could add a scroll event handler to the page and watch the position of the logo. If you detect it is at the right point on the page (ie. it is over the white section), then you could add a class to it (or the <a> or the <div>). The class would change the colour of the logo using fill: black, or whatever.
Have you considered an easier solution? Such as giving the logo a dark outline, so that it stands out when over the white background?
The fill property in CSS is for filling in the color of a SVGs.
svg {
fill: currentColor;
}
But you can't change the color of your logo for specific section of your site.
i check your demo link and I found out that they are use jquery to add and remove css class from there logo.
So you need add jquery 2.3.+
get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
Now on scroll add function
$(window).on('scroll',function()
and in it just add
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.logo').addClass('logo-dark');
} else {
$('.logo').removeClass('logo-dark');
}
Here's demo on codepen I made for you hope this will help you.
I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>
I have something like
<a href="OnlyThisONE"
<img class="SameClassForAllIMG" src="random.png">
</a>
I would like to replace the image which something else using only CSS. Is this possible?
Here is the Javascript solution.
var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
if (images[i].src == "random.png")
images[i].src = 'new.png';
}
Here is a possible CSS solution
.SameClassForAllIMG {
background: url(new.png) no-repeat;
}
The issue is the CSS should do it for the IMG only under the "OnlyThisONE" href, and not all of them. Is this possible using only CSS?
This is possible using only CSS. You can target the image using a[href='OnlyThisONE'] and hide the <img> tag within, then apply a background to the <a> link.
CSS
a[href='OnlyThisONE'] img {
display: none;
}
a[href='OnlyThisONE'] {
background: url('somebackground.jpg');
width: 100px;
height: 100px;
display: block;
}
In CSS you could use either pseudo-element on <a> or a background-image in <a> or even in <img> that can only be seen on hover.
here is 2 demo
one using a pseudo-element
one using the img tag with a background. (no src changed).
http://codepen.io/anon/pen/Jchjw
<p>Set background-image, and resize it to zero with padding on :hover
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1">
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>
img {
vertical-align:middle;
}
[href="#nature"]:hover .a-img {
height:0;
width:0;
padding:40px 60px;
background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
display:inline-block;
vertical-align:middle;
position:relative;
overflow:hidden;
}
[href="#nature3"]:after {
content:url(http://lorempixel.com/120/80/nature/4);
vertical-align:top;
position:absolute;
}
[href="#nature3"]:hover:after {
left:0;
}
The a:hover + img background works with oldest IE an it keeps the alt attribute useful, this would be my choice. pseudo-element :after/:before works from IE8, but not the ::*after/::*before syntaxe.
theres in css of course, many other solution working with a or img with or without a translucide gif/png :( ....
There are a few approaches you could use. In my opinion, the best one is #1, as it has the broadest browser support and it avoids the use of JS.
1 - You could select just that a (assuming the href is unique), show a background image, and then hide the contained image. You'll also need to specify width, height, anddisplayon thea`:
a[href$='OnlyThisONE'] img {
display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
background: url(someOtherImage.jpg) /* show another image as a background */
display: inline-block;
height: 100px;
width: 100px;
}
2 - Use content:url(), but it doesn't have broad browser support
- Is it possible to set the equivalent of a src attribute of an img tag in CSS? After running a quick self-check on support of content:url() I would not suggest doing this, at all. I could only get it to work in Chrome. Try it yourself: http://jsfiddle.net/3BRN7/49/
a[href$='OnlyThisONE'] img {
content:url("newImage.jpg");
}
3 - Use JavaScript as you have in your question.
If the src is "random.png", "new.png" will be displayed.
HTML
<a href="#">
<img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
<span></span>
</a>
<a href="#">
<img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
<span></span>
</a>
CSS
img.SameClassForAllIMG[src*="random.png"] {
display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
display: inline-block;
width: 300px;
height: 100px;
background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}
I guess that this code is the same as your JavaScript solution.
IE7>= version http://jsfiddle.net/nxvm7/1/
IE8>= version http://jsfiddle.net/nxvm7/2/
I know it seems trivial, but I'm having some trouble wrapping my head around this.
<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
<div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
<div id="divC" style="float: left; width: 100px; height: 100px; background-color: #FF00FF;">
</div>
</div>
</div>
What I need is a rule that applies to all divs, like div:hover { background-color: #000000 !important; }, that only affects the first parent div of the event (when I hover divC, I want the background color of divC to change to black, but not the background colors of divB or divA)... like the inspector does in Google Chrome.
Any ideas?
I don’t believe it is possible to do this with just CSS, but you can with JavaScript.
The key is to use event.stopPropagation() on the mouseover event.
Here is an example using jQuery: http://jsfiddle.net/K96DS/2/
$('div').on('mouseover', function(){
$(this).addClass('hovered')
// this is the key, this stops te mouover event
// from bubbling up to the parent elements
event.stopPropagation();
}).on('mouseout', function(){
$(this).removeClass('hovered')
})
Are you thinking using something like .this because of an odd behavior in :hover?
.mouseover(function(){
$(this).addClass('selected');
});
Are you looking for something like this ?
jQuery Solution:
$('div').each(function(){
$(this).on({
mouseover:function(){
$(this).css('background-color','black');
},
mouseout:function(){
$(this).css('background-color','');
}
});
});
http://jsfiddle.net/j8ebE/2/
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }
Maybe hacks... :)