I have a font awesome icon like this on my page
<fa-icon class="file-excel-icon" title="Export to Excel" [icon]="['sil', 'file-excel']"></fa-icon>
which translates to this html
So the class file-excel-icon does get added to the element.
I am now trying to modify some css of SVG element but it is never getting applied. I have tried this
.file-excel-icon
{
border:1px solid red;
svg
{
vertical-align: -0.170em !important;
border:1px solid blue !important;
}
}
and this
.file-excel-icon
{
border:1px solid red;
.svg-inline--fa
{
vertical-align: -0.170em !important;
border:1px solid blue !important;
}
}
and this
.file-excel-icon .svg-inline--fa
{
vertical-align: -0.170em !important;
border:1px solid blue !important;
}
But nothing seems to work for svg, no style is applying to it, while the style does apply to fa-icon element
Related
I cannot get the onsen fab element to change background color or border. I'm using angular 2 and onsen v2. If I uncheck the fabs default css in the browser inspector I see my css applied. I already tried !important.
Here is my css
.main-counter-remove{
text-align: center;
font-weight:bold !important;
color: #d9534f !important;
}
.main-counter-add{
text-align: center;
font-weight:bold !important;
color: #5cb85c !important;
}
.main-counter-remove.fab{
border: 2px !important;
border-color: #d9534f !important;
background-color: white;
}
.main-counter-add.fab{
border: 2px !important;
border-color: #5cb85c !important;
background-color: white;
}
This is my html
<div class="main-counter-remove">
<ons-fab modifier="mini" (click)="decrementMainCounter()">
<span>-</span>
</ons-fab>
</div>
<div class="main-counter">
<p style="padding:5px">10</p>
</div>
<div class="main-counter-add">
<ons-fab modifier="mini" (click)="incrementMainCounter()">
<span>+</span>
</ons-fab>
</div>
The fab class is applied to a child element of main-content-remove
Try that
.main-counter-remove .fab/* note the space */
{
/* rules here */
}
How can I highlight all spans and divs in my html that have classes that are not styled? this is for debugging purposes, to remind me what I will still have to fix up.
Use border to highlight the span and div elements
Do either:
span, div{
border: 1px solid red;
background-color: yellow;
}
Or:
.unstyledClassOfDivAndSpan{
border: 1px solid red;
}
I would add an XXX class to all the elements, then use this definition:
.XXX {
border: 5em solid red;
background-color: green;
}
Make sure this is at the end of the stylesheet so it doesn't get overridden. Then as elements are done, remove the XXX class.
Please Use this Css Hover Style for highlight all spans and divs in your html
div, span{
border: 1px solid red;
background-color: Black;
}
div:hover, span:hover{
border: 1px solid Black;
background-color: red;
}
OR
*Please Use this Css and Jquery Hover Function for highlight all spans and divs in your html*
.hilight{
border: 1px solid red;
}
$(function(){
$("spna div").hover(function(){
$(this).toggleClass("hilight");
});
});
I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?
I am trying to add a border to an image on rollover. The border is not showing when I roll over the image. Here is my code:
<script>
$(document).ready(function() {
$("#imgBorder").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder">link...
Why isn't the border appearing on hover?
Also, is there any way to do this so that it does not re-size the image when adding the border?
You do not need to use javascript to add hover on image rollover. Just add it to the css class instead.
<style language="text/css">
.rollOver : hover
{
border: 1px solid #000;
}
</style>
<div class="rollOver" id="imgBorder">Test</div>
First, to affect the image, your jQuery should be:
$("#imgBorder img").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
And your CSS should be:
.Hover { /* note the period preceding the 'Hover' class-name */
border: 1px solid #000;
}
JS Fiddle demo.
Note that:
.string selects element(s) by their class-name of string: <div class="string"></div>
#string selects an element by its id, which is equal to string <div id="string"></div>
string selects an element of string: <string></string>
But you don't need JavaScript, just use:
#imgBorder:hover img,
#imgBorder img:hover {
border: 1px solid #000;
}
JS Fiddle demo.
Something like this will work in CSS, link below
.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
I will direct you to the following link
http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/
In your selector below, you're targeting an element with the tagname "Hover". This does not exist.
Hover { border: 1px solid #000; }
What you wanted instead was:
.Hover { border: 1px solid #000 }
As others here have already pointed out, you don't need JavaScript for this as you can use the :hover pseudo-class:
img { border: 1px solid #FFF }
img:hover { border-color: #000; }
For further reading, see http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}