i have 2 element: .parentElement & .childElement.
Both are implement :active for making appeared darker when pressed.
The .childElement is inside the .parentElement.
I want to make .parentElement:active not triggered when .childElement:active triggered.
In javascript it can be done by using .stopPropagation(). How about in css way?
Here the project i'm working on:
Each heading are clickable, including the sub-heading.
Basically it's a button inside a button.
When a user click on it, the page will scroll to corresponding section.
I understand what you're asking, but in CSS the parent is active when the child is active - I don't believe there's any way to prevent the click from "bubbling".
Instead you could fake it, by using sibling elements that you've styled to appear nested, as follows:
<style>
.parentElement {background-color:#ff9999;padding:8px;}
.childElement {background-color:#9999ff;border:solid 8px #ff9999;border-top-width:0;padding:8px;}
.parentElement:active {background-color:#ff3333;}
.parentElement:active ~ .childElement {border-color:#ff3333;}
.childElement:active {background-color:#3333ff;}
</style>
<div class="parentElement">Parent</div>
<div class="childElement">First child</div>
<div class="childElement">Second child</div>
<div class="childElement">Third child</div>
Please let me know if this helps :-)
Related
I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}
Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second
One way ,I use :focus pseudo class. div:focus a {}
I have three html pages that can be visited through tags that are on the navbar
So, there is not a main layout that shares the same navbar. Each page has its own HTML5 but they share the same CSS file
When a certain page is getting visited, its page on the navbar has a class "active " (See below)
navbar at the index.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
navbar at the team.html
<nav>
Home
Teams
History
USA Ultimate
</nav>
and so on for the history page
Each tag has been given CSS rules to be displayed like a button. (no bootstrap used)
What I tried to do is whenever I am on a certain page I want the tag to have a white background color. In order for the visitor to know which page is currently open.
Finally I have configured it with the following CSS rule
Solution
.active{
background-color: #FFFFFF;
}
Initially i tried to do it by using pseudo-class
1)
nav a:active{
background-color: #FFFFFF;
}
2)
nav a:active:before{
background-color: #FFFFFF;
}
3)
nav a:active:after{
background-color: #FFFFFF;
}
Also used :target pseudo class but did not work.
For those that marked 1, 2, 3 and did not work, i tried it as I read the documentation and having seen a proposed solution on fiddle.
Can someone tell me what is the difference between the solution that worked and the others that I tried allong with :target and did not work?
As long as you have three pages that each one has its own HTML code, the way you solved it is one that you could do it, elsewhere in order to use :target you had to move as follow
Specify on each <a> an id and that id to be lace also at the end of the href.
See bellow
<div class="side_col">
<a href="#sl1">
<div id="sl1" class="side_link">Accounts
</div>
</a>
<a href="#sl2">
<div id="sl2" class="side_link">Newsletter
</div>
</a>
<a href="#sl3">
<div id="sl3" class="side_link">Operator
</div>
</a>
<a href="#l4">
<a href="#sl4">
<div id="sl4" class="side_link">Invoice
</div>
</a>
</a>
And the CSS
#sl1:target:before, #sl2:target:before, #sl3:target:before, #sl4:target:before { background-color: #24BDE9; }
The :active pseudo-class is only applied to an element while it is considered to be active: for an anchor, that is typically for the time from when you click your mouse button on it until you release your mouse button. That is not a particularly long time!
Taking a look at your example, it would work like this:
User begins clicking the Home link. Their mouse button depresses, and that link becomes :active. Your CSS using the :active pseudo-class in a rule applies to it.
The user releases the mouse button. That link is no longer :active and your CSS using the pseudo-class stops applying.
Page navigation happens. That link that was :active certainly isn't any more! This is when your class would take over and you achieve that effect that you want.
:active has a very short duration tied literally to the element being interacted with by the user: they are making it :active by clicking on it and not releasing their mouse button. In your case, that interaction is brief and will not carry over during page navigation.
This is why using a class works: that class is there when the page loads, will always stay there (unless you change it programmatically), and gives you a way to apply your CSS like you want.
EDIT to answer a question on :target below.
:target matches an element by ID to the URL fragment. In your example, you aren't using IDs, nor are you using URL fragments, so there is nothing that would be considered a :target.
:target could work with a structure like this below, but it's going a long way to solve a problem best solved by classNames:
<nav>
Home
Teams
<a href="history.html#history" id="history>History</a>
</nav>
In the example above, each link has a fragment and an element with the ID matching the fragment (#home and the first nav item's ID, for example). In that case, you would have an element that would be considered a :target.
You used nav a:active{..., but active is the class, so your selector has to be nav a.active{... instead. (dot, not colon)
nav a.active { ... }
The only difference is saying a.active instead of a:active due to the fact that .active is a class. You can check out this w3schools link: (scroll down a bit to where it says "Active/Current Navigation Link")
Hopefully this helped!
I'm trying to make an editor that inserts special types of elements. I figured out that if you set contenteditable to false on the elements within it, it wont let you type inside it (which is good), but it doesn't put the cursor before or after either, the cursor just disappears.
Is there a way to stop the user from typing inside the element but retain cursor focus when you click on it, as if it's a normal text symbol?
div div {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
div {background: #ccc}
<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>
<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>
<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>
You also cant click at the end of the text block if the block is last.
Big problem for usability, really would like to fix this.
Facebook has solved this problem, but I can't figure out if it's with js or css:
edit: I've discovered fb changes the caret-color property to black, but it then seems to jump to the position outside of the span after you type, which must be done with js. Still trying to figure out how.
edit: Tried a lot of things, thought I had it working but it still caused other weird problems. I recommend you just don't attempt this and just use an image element or emoji.
Looks like the readonly attribute is the tool for the job and has acceptable support caniuse.
[contenteditable]:read-only {
cursor: not-allowed;
}
css-tricks article is legit.
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
I'm trying to develop an overwolf app and am having issues receiving mouseLeave events.
Overwolf App:
<div id="menu" onMouseDown="dragMove();">
<div id="close" onclick="closeWindow();"></div>
</div>
<iframe src="URL_to_Webpage"></iframe>
<div id="scale" onmousedown="dragResize('BottomLeft');"></div>
<div id="sliderBg">
<div id="slider"></div>
</div>
The menu, close, scale and slider elements are overlayed ("position: absolute; left:...") over the iframe and work as window control elements (scaling, closing,...)
Webpage (iframe content):
$('html').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
I always get the hover class applied to my iframe as expected. CSS :hover selectors get applied as well.
The mouseLeave event though is only triggered, when leaving the iframe without "touching" the overlayed window control elements.
So if I touch those elements on my way out with my mouse, the "hover" class isn't removed (event simply not triggered) and all things applied with a css ":hover" selector aren't removed either.
Any help would be appreciated
Try add 'id' name on the iframe and imstead of directly using html.
I would like to see how it works to fully picture what you want to do.
Could you please paste your code at http://jsbin.com and let me know the link?