Why does the css :hover effect not work?
http://jsfiddle.net/t7on1k15/
body,html
{
font-family: courier;
height:100%;
min-width: 100%;
margin:0;
padding: 0;
}
#idDivBodyWrapper
{
margin:0;
padding:0;
height: 100%;
width: 100%;
background: lightgray;
}
#four:hover
{
color:black;
}
The HTML
<div id="idDivBodyWrapper" style="vertical-align:middle;">
<div style="position:absolute;display:block;float:left;left:0;Top:0"><button class="btn btn-default btn-lg" style="opacity:1;background:transparent;font-family:courier;font-weight:bold;" onclick="location.href='http://vqplan.com';"><i style="color:white;opacity:1;" class="fa fa-th fa-fw fa-5x"></i><br><span style="opacity:1;color:white">home</span></button></div>
<table style="width:100%;height:100%;background:black;clear:both;vertical-align:middle;text-align:center;"><tr><td>
<h1 id="four" style="font-size:10vh;color:white;">Code that lasts.<br><br><i id="one" class="fa fa-terminal fa-3x fa-fw" style="color:white;"></i></h1>
</td></tr></table>
</div><!--end idDivBodyWrapper-->
Here is one that does work:
http://jsfiddle.net/tuxdukz4/
CSS - CASCADING style sheets. You've got style="color:white" inside your h1#four element. That color:white is at a higher precedence level than your external style sheet rule, so color: white overrides the :hover style.
If you mod your fiddle and put color:purple into the h1's style= attribute, you'll get the exact same behavior: the hover won't work.
Because of CSS Specificity. I truly recommend you to read about it: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You have an element-level style color: white that overrides the hover effect.
Check this for a working one: http://jsfiddle.net/t7on1k15/1/
fiddle: http://jsfiddle.net/t7on1k15/2/
change the <h1 id="four" style="font-size:10vh;color:white;"> html to this:
<h1 id="four">Code that lasts.<br><br></h1>
and then add this css:
#four {
font-size:10vh;color:white;
}
your inline style has highest precedence over other css code.
I believe that putting the style inline ("style="font-size:10vh;color:white;") takes precedence over css. Inline style has higher priority. You actually couldn't style #four without hover in css if you use an inline style.
Related
In my angular 7 application, I am using material design. In my global styles.css file, I have some styling for material components, namely for mat icons. However, my settings are overridden by material's own style.
Using !important obviously works, but I think there is a more natural way, I just can't figure it out. In chrome dev tools, my CSS class selector simply appears below that of material design selector, and I think this means that it was simply applied sooner, and thus material style takes precedence, since they are both class selectors and should have the same priority (that is my understanding, anyway).
Relevant entry from styles.css:
.icon {
display: inline-block;
height: 30px;
width: 30px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
How it appears in chrome dev tools:
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
.icon {
height: 30px;
width: 30px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
Width and height are simply crossed out in my .icon style.
How can I make my style sheet be prioritized? Can I somehow specify the order in which stylesheets load, or explicitly tell angular that I want my styles take over material styles?
EDIT: added HTML where mat icons are:
<mat-toolbar color="primary">
<div fxFlex fxLayout>
<mat-toolbar-row fxFlex fxLayout fxLayoutGap="20px" class="navigation-items icon-group">
<span>
<a routerLink="/">
<mat-icon class="icon">home</mat-icon>
<span class="label">Home</span>
</a>
</span>
<span>
<a routerLink="/product">
<mat-icon class="icon">bubble_chart</mat-icon>
<span class="label">Product</span>
</a>
</span>
<span>
<a routerLink>
<mat-icon class="icon">widgets</mat-icon>
<span class="label">Expedition</span>
</a>
</span>
<span class="spacer"></span>
<span>
<a routerLink (click)="logout()">
<mat-icon class="icon">input</mat-icon>
<span class="label">LogOut</span>
</a>
</span>
</mat-toolbar-row>
</div>
</mat-toolbar>
It is a specificity problem. You can modify the mat-icon class directly, use id which has higher specificity or use combined selector like
.icon-group > .icon
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
I need to create an icon that shows a div (menu) after a click on it.
Is it possible with CSS3?
This is for the mobile version and I don't need the :hover solution.
PS: If the only solution is doing it with Javascript a link to something would be good too.
CSS
.nav{
color: black;
background-color:white;
height: 5vh;
width: 100vw;
}
.menu{
color: black;
background-color:green;
height: 90vh;
width: 90vw;
}
HTML
<div class="nav">
<!-- Font Awesome Icon -->
<i class="fa fa-bars"></i>
</div>
Theres a few different ways to do this, none of them are foolproof I believe, here's an example using the :focus method. http://fiddle.jshell.net/rpwe4kzy/4/
CSS
.hide{display: none;}
button:focus ~ .hide{ display: block;}
HTML
<div>
<button tabindex="0">Show text</button>
<p class="hide">Hidden type</p>
</div>
See here for more solutions, https://tympanus.net/codrops/2012/12/17/css-click-events/
Otherwise if you want to use JS I suggest utilising a simple jquery function. I'm guessing you have jquery in your project already otherwise just substitute it for a vanilla javascript function.
CSS
<style>
.hidden{ display: none;}
</style>
HTML
<div>
<button class="click-me">Click me</button>
<p class="show-me hidden">
Here is some text!
</p>
</div>
JavaScript
<script>
$( document ).ready(function() {
$('.click-me').on('click', function(){
$('.show-me').show();
});
});
</script>
Here's a working example of the jQuery way, https://jsfiddle.net/clintongreen/bu22op77/
I am trying to make the "alt" text of the brand-logo and brand-logo-collapsed link white instead of the default blue like all the other ones. But am unable to figure out the proper css to specifically call that portion. Will someone please guide me in the correct direction.
<a href="#/" class="navbar-brand">
<div class="brand-logo">
<img src="#" alt="Dealer Tracking" class="img-responsive">
</div>
<div class="brand-logo-collapsed">
<img src="#" alt="Dealer Tracking" class="img-responsive">
</div>
</a>
CSS
a > navbar-brand > img {
color: #fff;
}
Your element with navbar-brand class is the same element as the anchor, so need to be treated as such in the CSS (be removing the space in between). Also classnames should be prepended with a ., and as you have a div in between the image and the anchor, it will break the rule, as > only selected direct descendants, so get rid of that:
a.navbar-brand img {
color: #fff;
}
Should get it working.
You can do this:
.brand-logo > img, .brand-logo-collapsed img{
color: white;
}
And if you want to to this for all of your images:
img{
color: white;
}
Subj. I've got a module for Joomla (don't blame me for using joomla, it's not me, i'm just helping my friend) with advertisment. The problem is that i can't get source codes for any modules, so I have to fix most of the problems via CSS (display:none method mostly).
<div style="text-align: right;">
<a style="text-decoration:none; color: #c0c0c0; font-family: arial,helvetica,sans-serif; font-size: 5pt; " target="_blank" href="http://joomline.ru/">ADVERTISMENT HERE</a>
</div>
If only div was declared, I would simply make it invisible using the display:none method...
Looking forward to help !
EDIT:
<div class="content">
<div id="jlvkgroup41016340" style="background: none repeat scroll 0% 0% transparent; height: 301px; width: 270px;">
...
</div>
<script type="text/javascript"> ... </script>
<div style="text-align: right;">
<a style="text-decoration:none; color: #c0c0c0; font-family: arial,helvetica,sans-serif; font-size: 5pt; " target="_blank" href="ADVERT LINK">TEXT ADVERT</a>
</div>
</div>
Assuming you're trying to hide the link (with that specific href):
a[href^="http://joomline.ru"] {
display: none;
}
JS Fiddle demo.
Based on the newly-added HTML, you can target the specific a element using sibling-combinators:
#jlvkgroup41016340 + script + div a {
display: none;
}
JS Fiddle demo.
This targets the a elements that are a descendant of a div element that's the immediately-adjacent sibling of a script element that is itself the adjacent sibling of the element with the id of jlvkgroup41016340.
Or:
#jlvkgroup41016340 ~ div a {
display: none;
}
JS Fiddle demo.
This targets the a descendants of a div which is the later-sibling of the element of id="jlvkgroup41016340".
References:
General-sibling (~) combinator.
Adjacent-sibling (+) combinator.