Transparency in CSS - fighting with inheritance - javascript

I have an ul with a background-color of rgba(15,15,15,0.8). I want a li element of the list to be more transparent, e.g. I want it to have background-color set to rgba(15,15,15,0.5). The problem is that being the inner li element transparent, I see the background color of its ul parentso what I get is actually an even darker background
Is there a way in CSS (but for that matter it would be fine through JS/jQuery too) to "cancel" the background property of the parent?
Edit
Note that also colouring the "rest" of the list (the part of the list not made by lis) would be fine, even if I don't think it's easy nor a good solution.

You could do it by not setting a background on the ul and setting RGBa borders on the li.
demo
Relevant CSS:
border: solid .5em rgba(15,15,15,.8);
background: rgba(15,15,15,.5);
(you can adjust the width values of the borders to suit your needs)

if you're just trying to lighten the colour (as opposed to letting underlying images or text show through), you might consider using background-color: rgba(256,256,256,0.3) which would put a light haze of white over your child element.
view here: http://jsfiddle.net/9VBnr/
You might also check out this oldie but goodie from Eric Meyer: http://meyerweb.com/eric/css/edge/complexspiral/demo.html

Sorry, but that would be like expecting a clearer view by putting a shaded piece of glass on top of another piece of shaded glass. It would just not work. :)
What you need to do is to reverse the way you think. Make the topmost layer have the right look and then move to the one beneath it.
Style the li elements with a none transparent background. Use a sprite to get the look you want if you need something else but pure color. Then move on to the ul element and give that the look you want - even using opacity.

Related

How to Change Entire Navbar Color When Hovering on Element in a Navbar

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!

I am trying to display a block image on hover but just cant get it; with css3 and Html

before anything, this is my codepen, I am trying to pretty much hover over that and make it say about me. Ive tried a few things but it is just not clicking.
this is my link
http://codepen.io/willc86/pen/BrEmt
I was hoping someone can help explain to me how to change this to a solid background color (lets say all red) with font white saying "about me"
is it possible w/o JavaScript?
The trick is to apply the hover on something higher up.
You can't hover over something invisible. However, you can hover over the things which hold the invisible item.
So, instead of doing something like:
.hidden:hover { visibility: visible; }
Instead, put it on a parent element, like the li:
li:hover .hidden { visibility: visible; }
Now, when you hover over the li that contains the hidden item, the hidden item appears.
Now it's just a matter of tweaking that container to give you exactly what you want. =)

Darken Background - Without affecting elements itself. (Overlay?)

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/

Hover hyperlinks with this jQuery-animated menu?

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; }

Dynamically adding divs causes weird style-sharing

I'm having an annoying problem when dynamically adding divs to an existing div. I tried using the appendChild function, and also jQuery's append function; both give the same result. You can see the problem on this jsFiddle:
http://jsfiddle.net/debu/5b3Qr/
If you press the 'add stuff' button, it will add several divs created dynamically. Inside the for-loop it creates a div, then adds two text-containing divs to that, before appending it to the "mainDiv". Then outside the for-loop, I create two further divs; one of them has a style applied to it which has its background-color set to a light orange.
The problem is, that the divs created in the for-loop seem to inherit this orange background colour, even though .. well, even though the element with that background is added after them. And it's not like the paragraph that comes after the orange-background div inherits the orange; it stays as it should, white.
I've played a lot with this and found no way to solve it. Any ideas?
Cheers,
debu
Turns out you were having issues with the divs (of class compHolder) you're adding that have float:left applied.
You need to clear popupHeader3 with clear:both; to stop the header's background affecting those 3 divs before it from acting strangely.
Like so:
.popupHeader3 {
background-color: #FFBA9B;
margin-top:1px;
color: #000000;
font-family: "ProximaNova";
font-size: 18px;
clear:both;
}
See: http://jsfiddle.net/zyZ7Z/

Categories

Resources