This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I'm trying to display a text when hovering on another text but it is not working. I followed every steps on another similar questions but it is still not working
Code:
.text-mada {
width: 18%;
position: relative;
left: 760px;
background-color: rgba(255, 255, 255, 0.8);
text-align: justify;
padding: 15px;
z-index: 2;
bottom: 750px;
display: none;
}
.dot-mada {
position: relative;
text-align: center;
font-size: 50px;
left: 52px;
bottom: 44px;
.dot-mada:hover + .text-mada {display: block}
My goal is that when .dot-mada is hovered, .text-mada is displayed
PS: I'm a begginner so this might be a dumb question for you guys, lol
You can use code like in this example:
div {
height:100px;width:100px;
background:blue;
margin:20px;
}
span {
display:none;
height:100px;width:100px;
background:pink;
margin:20px;
}
div:hover ~ span {
display:block;
}
<div>text 1</div>
<span>text 2</span>
If .text-mada is inside .dot-mada, then the solution looks like this
.text-mada {
display: none;
}
.dot-mada:hover > .text-mada {
display: block;
}
<div class="dot-mada">
Foo
<span class="text-mada">Bar</span>
</div>
If they are siblings:
.text-mada {
display: none;
}
.dot-mada:hover + .text-mada {
display: block;
}
<span class="dot-mada">Foo</span>
<span class="text-mada">Bar</span>
keep the div you want to show, below the visible div
Related
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed last year.
I'm having an issue with a button animation I'm trying to make. I want a description box to slide out from behind a button when the button is hovered over, but in the way that I'm doing it, it has no transition and just snaps to its position. My setup is below:
.button {
position: absolute;
display: flex;
padding:7px;
margin: 20px;
background-color: red;
}
.button > .popout {
display: none;
position: absolute;
padding: 2px;
background-color: blue;
color: white;
transition: 1s;
}
.button:hover > .popout {
display: block;
transform: translateX(20px);
}
<div class="button">
<div class="icon">
O
</div>
<div class="popout">
email
</div>
</div>
when what I really want is the "email" text to glide out from beneath the O background without showing any blue or text on the left of the O. Sorry if I didn't do this right or provide enough info, I'm very new to stack overflow and just getting back into HTML and CSS after leaving it alone for a while
Animations don't work with display: none/block, you have to use visibility: hidden/visible:
.button {
position: absolute;
display: flex;
padding:7px;
margin: 20px;
background-color: red;
}
.button > .popout {
visibility: hidden;
position: absolute;
padding: 2px;
background-color: blue;
color: white;
transition: 1s;
}
.button:hover > .popout {
visibility: visible;
transform: translateX(20px);
}
<div class="button">
<div class="icon">
O
</div>
<div class="popout">
email
</div>
</div>
Is there a way to position an img separately from the source (text) in an anchor element? For instance, in the picture, I want the word "dot" to be aligned further right than the arrow but stay on top of the arrow.
current
what I want
I know I could make them as separated anchors but I want the color of the word to change when you hover on the arrow as well and if they are separate, the a:hover doesn't work together.
I tried changing the position under .left img to be different but it moves the img and the source.
HTML code:
<span class="leftarrow">
dot<img src="images/leftarrow.png">
</span>
CSS code:
.leftarrow {
position: absolute;
left: 0;
top:0;
}
.leftarrow a{
position: absolute;
left: 0;
font-size: 1.5em;
color:gray;
text-decoration: none;
}
.leftarrow a:hover{
color: black;
}
.leftarrow img{
position: absolute;
left: 0;
top: 15px;
width: 50px;
}
Try this, using Pseudo-Elements. It could definitely be more optimized than this though.
a {
margin-left: 100px;
}
span:after {
content: "";
background-image:url('https://www.flaticon.com/svg/static/icons/svg/271/271218.svg');
display: inline-block;
background-size: 30px 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 1;
left:90px;
top: 15px;
}
a:hover {
color: red;
}
<a href="#">
<span>dot</span>
</a>
First: wrap the dot into a <span> or <div> for better control,
Second: use a more powerfull display mode (e.g: flex or grid)
here is a sample:
a {
vertical-align: middle;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-end;
color: black;
width: fit-content;
margin: 0 auto;
}
a:hover {
color: red;
}
div {
font-size: 32px;
}
img {
width: 100px;
}
<a href="#">
<div>dot</div>
<img src="https://www.flaticon.com/svg/static/icons/svg/271/271218.svg" />
</a>
This question already has answers here:
Vertically center <span> text which is beside a much larger <span>, both inside a <div>
(2 answers)
Closed 5 years ago.
Example: https://codepen.io/ahdung/pen/dJVZov
body {
font-size: 2em;
}
.outer {
background-color: darkgray;
}
.inner {
background-color: red;
font-size: 0.7em;
vertical-align: middle;
/*not useful*/
}
<span class="outer">
<span class="inner">AAA</span>BBB
</span>
simplest solution. although you may want to tinker for exact placement since block with inline isn't always perfect.
.inner {
display: inline-block;
vertical-align: middle;
}
you could go more complex to get a better center doing something with:
.outer {
display: inline-block;
position: relative;
padding-left: 2.5em;
}
.inner {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
}
depending on what's around it and what kind of text or variable text, you can do different things.
This question already has answers here:
heading with horizontal line on either side [duplicate]
(3 answers)
Closed 5 years ago.
First I have to say, I didn't find any answer to this. If it's a duplicate, please forgive me and point me correct.
I'm trying to create a div with three divs inside. The center div should have text, and the side divs should have a vertically centered line, like this:
This is the code I have so far:
HTML:
<div className="container">
<div class="line"><hr/></div>
<div class="text">My Text</div>
<div class="line"><hr/></div>
</div>
CSS:
.container {
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
display: inline-block;
}
.line {
display: inline-block;
}
}
My problem is that I don't see the lines at all, my text is positioned to the left. I tried margin: auto; but that didn't help me. Can someone plese help?
I have one prerequisite, I can't use flexboxes.
You could approach this layout using pseudoelements instead of hr.
Example:
.container {
text-align: center;
position: relative;
}
.container:before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: grey;
top: 50%;
transform: translateY(-50%);
}
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
margin: 0 auto;
display: inline-block;
background: white;
position: relative;
/* add left and right padding if needed */
padding: 0 1em;
}
<div class="container">
<div class="text">My Text</div>
</div>
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I don't understand why adding a text do a div seems to be changing how the div is parsed by the browser? Looks like the margin-top is changed, though it isn't.
HTML
<div id="nav">
<div class="nav-left">left</div>
<div class="nav-logo"></div>
<div class="nav-right">right</div>
</div>
CSS
#nav {
width: 400px;
height: 30px;
background: #f5f5f5;
border: 1px solid grey;
text-align: center;
}
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
}
.nav-left {
background: red;
}
.nav-right {
background: blue;
}
.nav-right, .nav-left {
width: 50px;
}
.nav-logo {
background: yellow;
width: 30px;
margin-left: 10px;
margin-right: 10px;
}
Code is also here: http://jsfiddle.net/NcA8r/
As #JoshCrozier said, you need to add a vertical-align to your 3 divs.
This:
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
}
Should be:
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
vertical-align:top;
It happens because you used display: inline-block; in your inner divs.
inline-block elements are vertical-align:baseline; by default.
Check this out this great answer.
"The default value for vertical-align in CSS is baseline."
And this one too.