In the link above, how can I make that when I click on "Register" it will hide the welcome class and show the register class ...
If I substitute focus for hover it works but it's obvious that I need a clickable option and not on mouse over...
*:hover ~ .register_box {
display: flex;
}
*:hover ~ .welcome_box {
display: none;
}
And I am wondering how to do this in CSS not JavaScript.
And I am using all elements selection (the "*") for testing purpose.
https://jsfiddle.net/sufwaqaa/
Related
I'd need to recreate the following effect: hovering onto .card container, should trigger :hover also on .btn inside it.
Please, consider this example code: https://codepen.io/ldetomi/pen/ZEoNprQ
Ok, could be possible to use JS and trigger an 'hover' css class onto inner .btn, but this will force me to duplicate code for hover state of .btn, for :hover pseudo-state and .hover class. Or, in another way, I'd need to duplicate state of hover buttons, in case that is child of a DIV that has an 'hover' state.
Due to the thing that i have a complex style for hover state of buttons, I'd like to be able to trigger the same hover effect on it, also if hover is made onto father DIV in a smart way.
If, possible, I'd like to avoid something like this:
.btn {
&:hover {
background: red;
}
}
.card {
&:hover {
.btn {
background: red;
}
}
}
You can just add the below rule.
.card:hover > .btn {
background: red;
}
Edit :
You can club both hover rules together to prevent code duplication
.card:hover > .btn, .btn:hover
{
background:red;
}
I have the following CSS code:
#searchbar-wrapper input#header-searchbar:focus +
#search-dropdown-wrapper { display: block; }
The purpose is that a dropdown becomes visible when the user puts focus on a textbox.
The dropdown should by default be invisible though:
#searchbar-wrapper #search-dropdown-wrapper{ display: none; }
Now the problem is that when I try to select an item from the dropdown list (anchor href), the dropdown wrapper disappears before I'm actually able to execute the click event. This happens because there is no focus on the textbox anymore.
Is there an easy solution for my problem without requiring to change the entire code?
Thanks!
Edit: I've added the resulting HTML in an image, because it is being dynamically generated.
Edit2: Fiddle based on the fiddle made by #anpsmn: http://jsfiddle.net/thh9z99c/2/
I need a list with anchors because they represent a list with urls.
Use the CSS pseudo selector [:focus] and then extend it to the child element.
//CSS BLOCK
#searchbar-wrapper input#header-searchbar{
}
a{
display: none;
}
#searchbar-wrapper input#header-searchbar:focus>a { // use [:focus>a]
display: flex;
display: -webkit-flex;
}
It works with the pseudo-class active instead of focus:
#searchbar-wrapper input#header-searchbar:focus +
#search-dropdown-wrapper, #searchbar-wrapper input#header-searchbar +
#search-dropdown-wrapper:active { display: block; }
#searchbar-wrapper #search-dropdown-wrapper{ display: none; }
Fiddle: http://jsfiddle.net/thh9z99c/3/
I've this menu in which a tab with a css id selector hide or show a div on hover but i can't call it in css.
Here i insert an example to explain better my issue: on hover 7, 8 and 9 appears. How i have to change: #seven:hover ~ .box
http://jsfiddle.net/a3y52/654/
Thanks for helping out!
You can not achieve that in CSS. Instead, you can use div.menu element to trigger the hover, because this element is at the same level as the elements you want to affect:
.menu:hover ~ .box {
display: inline-block;
}
Check DEMO
ALTERNATIVE jQuery
$(document).on('mouseenter', '#seven', function() {
$('.box').css({'display':'inline-block'});
}).on('mouseout', '#seven', function() {
$('.box').removeAttr('style');
})
I have a list of elements, and i want to change a style of an element when one clicks on the list element(and that specific style to stay the same until the user presses another list item).
I tried using the 'active' style, but no success.
My code:
#product_types
{
background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}
#product_types a:active
{
background-color:yellow;
}
but the element is 'yellow' only a millisecond, while i actually click on it...
Use the :focus pseudo class
#product_types a:focus
{
background-color:yellow;
}
See this example -> http://jsfiddle.net/7RASJ/
The focus pseudo class works on elements like form fields, links etc.
The reason it doesn't work in other browsers is related to the css focus specification. It states:
The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
So it seems to work perfectly fine with text input fields or when you focus using the tab key. To make the above compatible with other browsers add the tabindex attribute to each element and this appears to fix the problem.
HTML:
<ul>
<li id = 'product_types'>First</li>
<li id = 'product_types'>Second</li>
</ul>
CSS:
#product_types {
background-color: #B0B0B0;
position: relative;
}
#product_types a:focus {
background-color:yellow;
}
JSFiddle Example
I'm hoping someone can help me with this.
When I'm styling html components say all divs on the page I would add a CSS like:
div
{
background-color:Red;
}
which works fine. However when it come to styling an asp.net control say a button I try:
button
{
background-color:Red;
}
but this doesn't work. Could someone please tell me how you style these creatures?
An asp.net button is actually an input element. So to style it you would use:
input { background-color: red; }
But that would style all input elements (text boxes, button, radio buttons, check boxes). To target just buttons you can use some CSS3:
input[type=button] { background-color: red; }
Or, you can just give all the buttons you want to style a class and do it that way:
<asp:Button runat="server" CssClass="red-button" />
.red-button { background-color: red; }