I'm trying to figure out if there's a way to allow for prevent the styling of the ":focus" pseudo-class from being applying when there is a ":focus:active" or click event without the use of jQuery/JS. As the ":active" state is dependent on the ":focus" state, I would presume that ":focus:not(:active)" work, but it does not. Is there any way to combine ":not" with ":focus" to prevent "focus:active" from triggering "focus"?
:not(:focus) is the closest you can get in CSS
You can juste use :focus-visible this selector only triggers on focus not on active.
Well... a:focus:not(:active) works.
A thing that is important and a bit of a gotya, is the order of rules.
Always place the active as last so it overrules the hover.
It might be you want it on a none focus element like div.
Then you would need to add a tabindex for the browser to be able to set focus on the div.
And a thing to notice is that you need to assign the rules to a class or a type. A simple :hover { will not work on the div.
<html>
<head>
<style>
* {
outline: none;
}
a {
text-decoration: none;
display: inline-block;
padding: 3px 8px;
}
div {
display: inline-block;
}
.magic:focus:not(:active) {
text-decoration: underline;
border: 1px solid black;
padding: 2px 7px;
}
.magic:hover {
text-decoration: underline;
color: green;
}
.magic:active {
text-decoration: line-through;
color: red;
}
</style>
</head>
<body>
<a tabindex="1" class="magic" href="#"> hello </a>
<div tabindex="2" class="magic" > world </div>
</body>
</html>
Something can not get focused until it is active. So :focus:not(:active) is impossible. It can never be triggered.
Related
So I've got some section anchors inside a fixed header. I wanted to see if there's any css property/trick/hack I'm not aware of that will allow me to have the selected section anchor's color change when you select it, and obviously change back to the regular style when you select another section. I'm not sure if this is even possible, but I cannot use javascript - only css. It's all on a one-page site, so it's not like I'm changing the color on a new page.
<header>
<ul>
<li>○</li>
<li>○</li>
<li>○</li>
<li>○</li>
<li>○</li>
</ul>
<header>
EDIT : A new approach.
After some research I decided to play around with the :focus feature of buttons.
Here's what I got:
HTML
<button href="one" class="circle">○</button>
<button href="two" class="circle">○</button>
<button href="three" class="circle">○</button>
<button href="four" class="circle">○</button>
CSS
.circle{
background-color: none;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}
.circle:focus {
color: red;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
I thought I could use buttons as anchor tags... fail.
You can use :focus.
a:focus {
background-color: red;
}
I'm new to HTML and CCS. I would like to have an invisible link but I don't want to set the style of 'a' tags directly, instead I would like to set the style of its parent element so that it becomes invisible.
This is what I tried:
div {
color: white;
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
It doesn't show the text inside the 'a' tag, but it still shows a box around it, how I can get rid of that box?
I guess you are talking about the outline box.
You can remove it with:
div{
color: white;
border: none;
}
a, a:focus{
color: inherit;
border: inherit;
outline:none;
}
a:link{
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
You should add this CSS property to hide the outline in all your link elements :
a, a:focus {outline : none;}
In the other hand, if you want to make an element invisible, but still be able to receive click interactions on it, you can play with the opacity CSS property (setting the font color to white is not an elegant solution)
a{ opacity:0; }
The 'box' around your link has a default outline property defined. Be sure to include outline: none; to any element or pseudo-selector that includes this treatment.
div {
color: #ccc; /* for testing purposes*/
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
outline: none; /* removes outline */
text-decoration: none;
}
<html>
<body>
<div><a href='#trap'> inherit </a></div>
</body>
</html>
a:focus {
outline: none;
}
Is that what you are looking for?
I'm a bit confused why you are trying to make a link that is invisible in the first place, but the box you are referring to is most likely the focus box. Typically used to make it easy for the user to know what they are selecting and is good for accessibility-- it's usually not recommended to remove.
You can though by adding the code below.
a:focus {
outline: none;
}
how could add css style to this button.
Button html:
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
CSS i want to add
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
If there is answered question, please send link. Thank you
You could add class="button" to the button to make it work. Cause your CSS .button will be used on every element which has the class="button"
function myFunction() {
alert('what ever')
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<button class="button" onclick="myFunction()">Player</button>
Read more about how CSS Selectors work here
<button class="button" onclick="myFunction()">Player</button>
As your button class you've set it ".button" add "button" as a class like above
Anything you put after the . will match the name of the class in the element
https://css-tricks.com/the-difference-between-id-and-class/ explains how you use classes, ids and what they do in good detail
In your case, you're two solutions :
First : use classe, if you've differents buttons in your pages :
you can just add class attribute in your HTML element like that :
<html>
<body>
<button class="btn" onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
And define the style in your class in your CSS :
<style>
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
Second : If all buttons are the same style, you can just add style for all element button :
Not change your HTML :
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
But, in your CSS, just change the reference, for select elements button :
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
You can learn more explain about selector (.myClass, #myId, element) here in the mozilla developper website.
Don't forget, for optimize your web code, use as little code as possible, for reduce weight of pages, and to correctly use the different selectors (classes or id as not mandatory for CSS style : that depend to your utility) :)
Instead of declaring class button i.e(.button) you can apply style to all button elements.
Demo- https://jsfiddle.net/akshay193sw/bxm8wdqk/ Refer link
If you want to style a button I recommend adding a class to it and styling it with CSS. Here is an example below.
HTML Below
<button class='button_thing'> My Button </button>
CSS Below
.button_thing {
background-color: blue;
width: 180px;
height: 100px;
border-radius: 10px;
}
So what the CSS and HTML code above will do is it will create a blue button with a curved border and with a height of 100 pixels and width of 180 pixels. Now, the next question you might ask is how do I make an animation on the button when I hover over it?
CSS Hover Animations are a bit tricky at the start but get easier with practice. When I make buttons for my websites I like to use a site called ButtonAnimations because it gets straight to the point and gives me tons of animations (with HTML & CSS code) to choose from. Totally recommend it because it simply provides you with amazing buttons and animations that you can just copy and paste into your code. ButtonAnimations Website Link: ButtonAnimations - Create Spectacular Button Animations with HTML 7 CSS
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I have a div that is a link to another page. When someone hovers over the div(ie, link) I want the whole div's background color to go blue. I would like to do this all in CSS because javascript may not work with everyone.
My Problem: My code below attempts to do this, the link works fine BUT when I hover over the div the background doesn't change color. What do you think I am doing wrong & how do you think I can fix this to make the div change background color on hover?
I have a feeling that I should place the link(a element) inside the div(instead of outside) but I can never get the a to stretch to the full space of the div that way.
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }
/* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
.sidebarLink { color: #000000; text-decoration: none; }
.sidebarLink a:hover { background-color: blue; }
/* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
-->
</style>
</head>
<body>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
</body>
</html>
:hover support is not great for non-anchor elements in older browsers and IE, so you can attach the hover psuedo class to the <a> instead and use a simple descendant selector:
a:hover #rentalAnnc { background-color: blue; }
You should put the <a> inside the <div>. If you want it to stretch across the full space, add display: block to its style.
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>We have a range of Education Facilities available for lease and hire</p>
</a>
</div>
a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }
Add <!DOCTYPE html> to top of your page to make it a HTML5 document and use the outcommented #rentalAnnc:hover { background-color: blue; } rule. Having a <div> inside <a> is invalid in HTML3/4, but apparently valid in HTML5 (disclaimer: HTML5 standard is still not definitive). After adding the proper doctype and the outcommented rule, your current problem (and many other (future?) layout-related issues) should be solved in MSIE.
Don't forget to fix the other http://validator.w3.org errors after adding the doctype, such as a missing title and so on. Browser behaviour is undetermined on invalid HTML.
A bit late I'm sure but I've been looking at this recently and I think the better solution is:
<style type="text/css">
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; width: 300px; }
a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
a.sidebarLink:hover div { background-color: blue; }
</style>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
Note: the rentalAnnc div does not have a background-color in it's style. This is in the link style only.
This way, the link covers the entire div exactly, not just a part of it. Also, any background-image applied to the div (eg with transparent areas for the background color to show through) will still be displayed!