I'm trying to apply changes on the ::after element when :hover but it doesn't work, here's my code and please tell me what's wrong, thank you!
&::after
content: ""
width: 100%
height: 100%
background:
image: url('../img/couverture.jpg')
size: cover
position: center
repeat: no-repeat
//outline: 1px solid red
position: absolute
z-index: 1
&::after:hover
outline: 1px solid red
You should indent the hover within the after like the below:
.element {
&:after {
&:hover {
styling:here;
}
}
}
instead of
:after:hover
try
:hover:after
I guess your rendered CSS will be like,
Element::after::after:hover{
outline: 1px solid red
}
Which is invalid, Also hover on :after will not work.
Related
Here's my CSS:
div {
border: 1px solid
font-size: 30px
color: red
width: fit-content
height: fit-content
}
Here's my HTML:
<div>⮝</div>
Here's how it shows up in the browser:
Here it is on JS Fiddle:
https://jsfiddle.net/f9wkb4qp/
I'd like to remove the gap between the div border and the font. eg. I'd like to make the result look more like this:
Any ideas as to how I might achieve this effect? Or is this even possible? Like if the white space is actually part of the character then I guess it might not be possible?
Try to use line-height.
div {
border: 1px solid;
font-size: 30px;
color: red;
width: fit-content;
line-height: 0.9;
}
<div>⮝</div>
I've designed some hyperlinks with CSS to add a background image (to make it look like a button) using the following code:
<a class="btnImg" id="btnImgConfig" href="#"></a>
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
As you can see, I'm trying to create a darker effect on the image on hover. This is the desired effect:
However, currently the effect is this:
I know I could easily do this by replacing the image on hover with a darker version of it. But somehow I feel this shouldn't be the way to do it in this case. Besides what is mentioned above, I've also tried rgba{..} on hover. This however had no effect at all.
Here's a JSFiddle of the code above.
You could alternatively use a pseudo-element which then overlays. This will give you the effect you require.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
position: relative;
}
.btnImg:hover::after {
background-color: #878787;
opacity: 0.4;
position: absolute;
content: '';
width: 100%;
height: 100%;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>
Try this:
Change opacity: .2;to -webkit-filter: brightness(0.5);
Easiest approach would be to have the text and tools over a transparent background, and change the background color on hover. No opacity or other such. To make it work without "!important" define the background with background-image, and the color, position, and repeat likewise separately. Or, define the background-color with important (it's ok, it's prescriptive).
Put the image's initial opacity to .2, then put it to full opacity on hover.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
opacity: .2;
}
.btnImg:hover {
opacity: 1;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>
What you show in the desired result is not really possible in the current setup..
If you are able to use a png24 file with a transparent background, you can accomplish this more easily, by just changing the background color.
#btnImgConfig {
background-image: url("https://cdn4.iconfinder.com/data/icons/ios7-line/512/Tools.png");
background-size:100%;
background-color: #eee;
}
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
#btnImgConfig.btnImg:hover {
background-color: #ddd;
}
See https://jsfiddle.net/zgurL5t9/ for an example.
Your image has a default background color which is causing this issue. try using a transparent PNG image instead along with the background-color property and you should be good to go.
I have updated your Fiddle link slightly for your reference:
JSfiddle
#btnImgConfig {
background: url("http://www.jar2exe.com/sites/default/files/images/pics/config-100.png") no-repeat scroll 0 0 #f8f8f8;
}
#btnImgConfig:hover{
background-color: #878787;
}
Note: I have used a different image of same size to make it easier for you.
Assuming you use a transparent png here.
You could create a different element within your a href.
<a id="btnImgConfig" href="#"><span class="btnImg"></span></a>
Keep the image on the link, but the background-color on the new element.
This way the opacity doesn't change the original background-img
CSS could be something like this.
.btnImg {
width:100px;
height:100px;
border:1px solid #e4e4e4;
position: absolute;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
width:100px;
height:100px;
display: block;
}
I am trying to make a CSS :after triangle the usual way. But it does not look as a triangle at all, please see http://jsfiddle.net/lborgman/eX3HL/:
/* triangle after */
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
}
#st {
line-height: 2em;
}
If I change "position:relative" to "position:absolute" the triangle will become a triangle. But that does not work where I want it (because it is on a float div).
What can I do?
Add display:inline-block to fix the triangle
#st:after {
position: relative;
margin-left: 10px;
content:"";
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid black;
display: inline-block;
}
JS Fiddle: http://jsfiddle.net/eX3HL/2/
It's a phenomenon that has to do with the native display of an object. The native display property of span is inline. Inline elements behave like plain text, while block elements behave more like images.
In your example when you do not override the default property of the span your element behaves like text and thus has also an font-size shadow-property which is set to inherit. It's an unexpected behavior since the shadow-properties are not visible to developers directly, so causing a lot of unclarities. You don't have to just believe my words, here is a proof: http://jsfiddle.net/eX3HL/5/
Please see the following jsBin:
http://jsbin.com/uyonux/1
It is working as desired on the hover state. However the focus state does not work as desired on focus i would like the blue color to not inherit the opacity of .4 i want it the solid #13A3F7 color. Is there any way to append the border without having it use the element opacity?
I tried pseudo elements but they also inherit opacity.
The other solution could be to take 60% plus of #13A3F7 but i don't think that works due to saturation.
I know i could change the image but the point is we are trying to use one black icon and then adjust it with opacity on the various states.
Thanks
button {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAALElEQVR42mNgwA/+QzHZYGAM2E8ADwED6B+I+ynEpPsLzfJBYgBFYTDEMxMA8SA+M9tIcT0AAAAASUVORK5CYII=") ;
border: none;
height: 23px;
width: 26px;
background-repeat: no-repeat;
opacity: 0.4;
filter: alpha(opacity=40);
background-position: center center;
}
button:focus {
border: 1px solid #13A3F7;
}
button:hover {
background-color: #CFCFCF;
box-shadow: 0 1px #696969;
opacity: 0.65;
filter: alpha(opacity=65);
cursor:pointer;
}
Also I'll need to support IE8 for now :(
You could use RGBa colors.
Like this:
border: 10px solid #ff0000;
border-color: rgba( 255,0,0,0.5);
Use outline: instead of border, like this:
button:focus, button:active {
outline: 1px solid #13A3F7 !important;
}
Edit: You could achieve this by using a link instead of button. Check out this Plunker: http://plnkr.co/edit/NZ3lOyFBSxOFwSExyBpA?p=preview
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?