This following css works (it makes visible button2 when hovering on button1)
#btn1:hover ~ #btn2 { visibility: initial;}
But if I want to make the same for the pseudo element #btn2:after, the following code doesn't work
#btn1:hover ~ #btn2:after { visibility: initial;}
Is there a reason or a workaround for it ?
It could be that you need to add the content property to btn2 🤔
#btn1:hover ~ #btn2 {
visibility: initial;
background-color:red
}
#btn1:hover ~ #btn2:after{
visibility: initial;
content:' Soy el after';
}
<button id="btn1">Botón 1</button>
<button id="btn2">Botón 2</button>
You can also use display:none;
When you use visibilty:hidden; your buttons will still have width and height in your body element but when using display:none; you can place any element to that position.
body {
position: relative;
height: 100vh;
background-color: bisque;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap:1rem;
}
button{
height: 50px;
width:100px;
}
#btn2::after{
content: '';
width:20px;
height: 20px;
background-color: red;
display: none;
}
#btn1:hover ~ #btn2::after {
display: inline-block;
}
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
Obviously you are both right. I made some adjustments and it works... can't figure what was wrong
I used visibility parameter
Related
Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.
PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.thing {
background-color: cadetblue;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new_game {
font-size: 3rem;
}
.what_is_question {
background-color: cornflowerblue;
cursor: pointer;
}
.what_is_question[open] {
background-color: darkmagenta;
}
.what_is_question {
font-size: 5rem;
}
.question_title {
position: relative;
}
.question_title::after {
content: url(./images/expand_more_black_24dp.svg);
}
.what_is_question[open] .question_title::after {
transform: rotate(180deg);
}
.question_title::marker {
content: none;
}
.answer {
background-color: darkkhaki;
font-size: 3rem;
padding-left: 3.5%;
}
<div class="thing">
<h1 class="new_game">QnA</h1>
<details class="what_is_question">
<summary class="question_title">What is the question?</summary>
<p class="answer">The question is the answer.</p>
</details>
</div>
https://codepen.io/consig1iere/pen/bGWXRMW
The problem is that you can't apply transforms to elements with display: inline.
So add display: inline-block; to your .question-title
.what_is_question[open] .question_title::after {
display: inline-block;
transform: rotate(180deg);
}
Could anybody tell me how can I achieve this style using flexbox? Pls note the modal close button in the right side of the photo.
This is what i have so far. I don't know how to place the close button on top of the image.
Below is my code for the bootstrap modal dialog box:
<Modal show={this.props.show} onHide={() => this.props.onHide()}
>
<Modal.Body className ="modal-body">
<div className = "data-container">
<div class="callout" data-closable>
<button class="close-button" onClick={() => this.props.onHide()} aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
{this.props.data}
</div>
</Modal.Body>
{/* <Modal.Footer className = "modal-footer">
{this.props.title}
</Modal.Footer> */}
</Modal>
And here is the CSS:
.modal-dialog {
display: flex;
max-width: 800px;
height:auto;
flex-direction:column;
justify-content: center;
padding-top:150px;
margin: auto;
}
.modal-content {
overflow: hidden;
border:none;
justify-content: center;
margin:auto;
}
.modal-body {
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:rgb(221, 221, 221);
padding: 2px;
}
.callout {
display:flex;
border: none;
display: block;
margin-left:47rem;
}
.close-button {
border: none;
background-color:rgb(221, 221, 221);
color:red;
margin:auto;
/* font-weight: bold; */
font-size:50px;
/* width:30px;
height:30px; */
}
Any help is greatly appreciated.
Thanks ✌️
First you need to specify your parent containers position as relative
.data-container {
position: relative;
}
And then set position as absolute and right to 0 on container that containers your close button
.callout {
position: absolute;
right: 0;
}
Demo here
I wanted to try making custom radio buttons, however they only work on Chrome and Opera.
On Edge what I create using ::after is invisible, however on other browsers it is visible.
The problem seems to be visibility: hidden on radio. On Edge its children disappear, but on other Browsers visiblility:visible brings them back.
[type=radio] {
position: relative;
width: 50px;
height: 50px;
visibility: visible;
}
[type=radio]::after {
width: 50px;
height: 50px;
display: inline-block;
content: "";
background-color: pink;
visibility: visible;
border-radius: 100%;
}
<input type="radio">
The radio button in your code snippet doesn't change when clicked in Chrome. I made a demo in which the radio button's background-color will change to pink when clicked. I test it in Edge and Chrome and it works. You could check the code below.
input[type="radio"] {
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: lightgray;
}
input[type="radio"]:checked + label span {
background-color: pink;
}
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span></label>
This question already has answers here:
Change CSS element that comes after another
(2 answers)
Make :focus change css of another class
(3 answers)
Closed 4 years ago.
Is it possible to change one class when another is in focus with CSS? For example, .ClassA when .ClassB is in focus
I'm trying to achieve something similar to the apple.com search feature where the menu hides and the search input field expands when selected.
Try this out, it may give you a scent of hope O:-)
However it is very unlikely, that you will get a better solution with pure CSS, it truly is usually made with JavaScript, while each HTML element has list of classes and you may add a class or remove a class quite easily.
<html>
<head>
<style>
#spawner {
display: none;
}
#spawner ~ div {
display: none;
}
#spawner:checked ~ div {
display: block;
}
</style>
</head>
<body>
<label for="spawner">
<div>Click me to show content!</div>
</label>
<input type="checkbox" id="spawner">
<div>
Was that a JavaScript? I doubt it!
</div>
</body>
</html>
Maybe something like this?
input { width: 35%; -webkit-transition: width .35s ease-in-out; transition: width .35s ease-in-out;}
input:focus { width: 100%; }
const menu = document.querySelector('.menu');
const search = document.querySelector('.search');
search.addEventListener('focus', () => {
console.log('Focuse');
search.classList.add('search--active');
menu.classList.add('menu--hidden');
});
search.addEventListener('blur', () => {
search.classList.remove('search--active');
menu.classList.remove('menu--hidden');
});
html, body {
padding: 0;
margin: 0;
}
.menu {
display: flex;
flex-direction: row;
}
.menu > a {
padding: 10px;
color: white;
text-decoration: none;
transition: background-color 0.3s;
}
.menu > a:hover {
background-color: rgba(0,0,0,0.5);
}
.wrapper {
display: flex;
flex-direction: row;
background-color: #eae;
box-shadow: 0 0 5px #888;
align-items: center;
justify-content: space-between;
padding-right: 10px;
}
.search {
width: 200px;
border-radius: 10px;
transition: width 0.5s;
}
.search--active {
width: 500px;
margin-left: auto;
}
.menu--hidden {
display: none;
}
<div class='wrapper'>
<div class='menu'>
<a href='#'>Home</a>
<a href='#'>About</a>
<a href='#'>Contact Us</a>
<a href='#'>Support</a>
<a href='#'>Page</a>
</div>
<input class='search' type='search' name='search' />
</div>
In my script there are three divs. I want to display div with class="ab" when I hover on first line and display div with class="abc", when hover on second line. Otherwise I want to display div with class="a" by default.
But it never displays the div with class="a".
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>
Here is my JSFiddle of my problem: JSFiddle Link
To hide an element, use:
display: none;
visibility: hidden;
To show an element, use:
display: block;
visibility: visible;
The difference is:
Visibility handles the visibility of the tag, the display handles space it occupies on the page.
If you set the visibility and do not change the display, even if the tags are not seen, it still occupies space.
You need
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .a,
#f:hover ~ .a{
display: none;
}
Updated demo at http://jsfiddle.net/gaby/n5fzB/2/
The problem in your original CSS was that the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden for all .a elements.
you can use any of the following five ways to hide element, depends upon your requirements.
Opacity
.hide {
opacity: 0;
}
Visibility
.hide {
visibility: hidden;
}
Display
.hide {
display: none;
}
Position
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
clip-path
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
To show use any of the following:
opacity: 1;
visibility: visible;
display: block;
Source : https://www.sitepoint.com/five-ways-to-hide-elements-in-css/
Html Code :
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab hideDiv">First content</div>
<div class="abc hideDiv">Second content</div>
Script code:
$(document).ready(function() {
$("#f").mouseover(function(){
$('.a,.abc').addClass('hideDiv');
$('.ab').removeClass('hideDiv');
}).mouseout(function() {
$('.a').removeClass('hideDiv');
$('.ab,.abc').addClass('hideDiv');
});
$("#s").mouseover(function(){
$('.a,.ab').addClass('hideDiv');
$('.abc').removeClass('hideDiv');
}).mouseout(function() {
$('.a').removeClass('hideDiv');
$('.ab,.abc').addClass('hideDiv');
});
});
css code:
.hideDiv
{
display:none;
}
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>
html code :
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show & Hide</button>
<div id="target"></div>
css code :
#target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}
javascript code :
$('.Show').click(function() {
$('#target').show(200);
$('.Show').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('#target').hide(500);
$('.Show').show(0);
$('.Hide').hide(0);
});
$('.toggle').click(function() {
$('#target').toggle('slow');
});