This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 5 months ago.
i'm new here and still learn to become Web designer and this is my big issue
why #btnC can effect on #btnB and #btnB can't effect on #btnC ??
i try to use "~,+, , >" and all of thease didn't work i need to know more details about hovering items on each other,
could you help me please ?????
this is my code ⬇⬇⬇⬇⬇
<style>
.countainer{
width: 500px;
}
.box{
height: 100%;
}
#btnC{
display: inline-block;
text-align: center;
position: absolute;
background-color: #009fdf;
border-radius: 50px;
margin-left: 205px;
margin-top:550px;
text-decoration: none;
color:#F2F2F2;
transition: 0.8s;
}
#btnB{
display: inline-block;
text-align: center;
position: absolute;
background-color: #ffcc00;
border-radius: 50px;
margin-left: 380px;
margin-top:550px;
text-decoration: none;
color:#53565A;
transition: 0.8s;
}
#btnC div, #btnB div {
width:150px;
padding: 20px 0;
}
#btnC:hover {
transform: scale(1.2);
background-color:#ffffff;
color:#009fdf;
transition: 0.8s;
}
#btnC:hover ~ #btnB {
margin-left: 400px;
}
#btnB:hover{
transform: scale(1.2);
background-color:#ffffff;
color:#ffcc00;
transition: 0.8s;
}
#btnB:hover #btnC {
margin-left: 195px;
}
</style>
<div class="countainer">
<div class="box">
<a id="btnC" href="#"><div>Individual</div></a>
<a id="btnB" href="#"><div>Team</div></a>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a8687897-418c-40db-b92b-af479b5b1cb6/d5cyk3x-ee5a53c6-240b-400a-8ee6-64e0ac9bd4ed.jpg/v1/fill/w_900,h_360,q_75,strp/background_2012_by_davicinpuntocom-d5cyk3x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9hODY4Nzg5Ny00MThjLTQwZGItYjkyYi1hZjQ3OWI1YjFjYjYvZDVjeWszeC1lZTVhNTNjNi0yNDBiLTQwMGEtOGVlNi02NGUwYWM5YmQ0ZWQuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9MzYwIn1dXX0.jLqQ7mUnFBNhVh_NpAO5plPheYvTtzQ0JvZ_8gLr5sY" width="1700px" alt="">
</div>
</div>
CSS have not selector for previous sibling elements, but you can use :has selector for the problem:
#btnC:has( + #btnB:hover) {
margin-left: 190px;
}
Related
I am making a carousel with react-slick and trying to add hover transition to it. But the picture can only scale in 1 direction.
My css:
.carousel {
margin-bottom: 10rem;
margin-left: 3.75rem;
margin-right: 3.75rem;
.slider-container {
div {
img {
width: 100%;
padding-right: 2px;
padding-left: 2px;
transition: transform .3s;
border-radius: 5px;
&:hover {
transform: scale(1.3);
transition: transform .6s;
border-radius: 5px;
}
}
}
}
}
react.js:
<div className="carousel">
<h2> Trending </h2>
<Slider {...settings} className="slider-container">
<div>
<img src={img1} alt=""/>
</div>
You need to set
.slick-list {
overflow: visible;
}
This will overwrite current slick overflow value and allow children to overflow
I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
What I am trying to achieve is to animate an element width few words in the way that hovered word leaves in the center of the element and the rest smoothly goes out of the bounds. I would also keep it as clear as possible in HTML and not to use fixed pixel amount of margins/widths to position elements.
The very lousy sketch of what I have on my mind is here:
* {
transition: all 1.5s;
}
div {
min-width: 150px;
width: 30%;
height: 25px;
line-height: 25px;
background: orange;
text-align: center;
overflow: hidden;
}
div:hover {
background: white;
word-spacing: 300px;
}
a:hover::after,
a:hover::before {
content: ' ';
}
<div>
<a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>
Each word on hover should go to center (possibly not with those 'jumps' visible now when other words disapear). Do you have any ideas? I'm pretty sure that the way I try to follow with word-spacing is wrong.
The issue is that when increasing word spacing the text goes to new line and create this jump thing. So you may add white-space: nowrap and you can also use padding-left to push text and make it in the center :
div {
min-width: 150px;
width: 180px;
height: 25px;
line-height: 25px;
background: orange;
text-align: center;
overflow: hidden;
transition: all 0.5s;
box-sizing: border-box;
white-space: nowrap;
}
div:hover {
word-spacing: 80px;
padding-left: 80px;
background: white;
}
<div>
<a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>
Actually the word spacing is applied to the div so you cannot apply hover on word. It's also easier to apply this technique on the first word as the second one will be hide with overflow, but am not sure how you can do the same with the second word with the use of word-spacing.
Here is another idea on how you can do without word-spacing. I used some padding animation and also pseudo element to hide the first word when hovering the second one.
div {
min-width: 150px;
width: 180px;
height: 25px;
line-height: 25px;
background: orange;
text-align: center;
overflow: hidden;
transition: all 0.5s;
box-sizing: border-box;
white-space: nowrap;
}
.afirst,
.asecond {
position:relative;
display: inline-block;
transition: all 0.5s;
}
.afirst:hover {
padding: 0 44%;
background: white;
}
.asecond:hover {
padding: 0 50% 0 0;
background: white;
}
.asecond:hover::before {
content:" ";
position:absolute;
left:-50%;
width:50%;
top:0;
bottom:0;
z-index:99;
background:#fff;
}
<div>
<a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>
I think you can generalize this solution by using :before element in the left and :after element in the right to hide everything else.
Here is an example with multiple word (but not giving center alignement correctly, still need improvement) :
div {
min-width: 150px;
height: 25px;
line-height: 25px;
background: orange;
text-align: center;
overflow: hidden;
transition: all 0.5s;
box-sizing: border-box;
white-space: nowrap;
}
.word {
position: relative;
display: inline-block;
transition: all 0.5s;
}
.word:hover {
background: white;
padding: 0 40%;
}
.word:hover::before {
content: " ";
position: absolute;
left: -50%;
width: 50%;
top: 0;
bottom: 0;
z-index: 99;
background: #fff;
}
.word:hover::after {
content: " ";
position: absolute;
right: -50%;
width: 50%;
top: 0;
bottom: 0;
z-index: 99;
background: #fff;
}
<div>
<a class="word" href="">First</a> &
<a class="word" href="">Second</a> &
<a class="word" href="">third</a> &
<a class="word" href="">Fourth</a>
</div>
Another solution with perfect centering but less animation for the other words :
div {
position:relative;
height: 25px;
width:500px;
margin:0 auto;
line-height: 25px;
background: orange;
text-align: center;
overflow: hidden;
transition: all 0.5s;
box-sizing: border-box;
white-space: nowrap;
}
.word {
position: relative;
z-index:9;
display: inline-block;
transition: all 0.5s;
}
.word:hover {
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
text-align:center;
background: white;
z-index:99;
}
<div>
<a class="word" href="">First</a> &
<a class="word" href="">Second</a> &
<a class="word" href="">third</a> &
<a class="word" href="">Fourth</a>
</div>
This version uses Flex Box, accommodates multiple items, and does not use fixed widths.
The trouble I kept having playing around with this was centering items without using fixed widths. Especially those that were later in line and trying to push items to the left.
Solution: flex box order.
You can set the order of flex items numerically, so simply setting it to -1 on hover puts the hovered item first in the list so you eliminate the issue of flexing items leftward.
The animation may not be as fluid as you're looking for because you can only transition order by integer. So it's immediately set along with the width, and then the other properties transition.
div.outer {
width: 50vw;
height: 30px;
background: orange;
text-align: center;
overflow: hidden;
position: relative;
padding: 0;
}
div.inner {
position: relative;
margin: 0 auto;
height: 30px;
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
flex-wrap: wrap;
}
span {
order: 1;
padding: 0 3px;
flex-shrink:1;
}
a {
z-index: 0;
order: 1;
height: 30px;
line-height: 30px;
flex-grow: 0;
flex-shrink: 1;
transition: background .5s, flex-grow .25s, flex-shrink .25s;
}
a:hover {
z-index: 10;
width: 50vw;
order: -1;
flex-grow: 1;
background: #eee;
}
<div class="outer">
<div class="inner">
First
<span>&</span>
Second
<span>&</span>
Third
</div>
</div>
This isn't perfect, but I think it comes pretty close to achieving what you were looking for. Using a little bit of jQuery was necessary for math (but not the animations themselves).
Hope this gets you further!
function reset() {
// reset all spans
$('.animate span').css('transform', '');
$('.animate span.active').removeClass('active');
}
$('.animate').on('mouseover', 'span:not(.active)', function() {
reset();
// set current hovered word to active
$(this).addClass('active');
// slide over previous/next words
$(this).prevAll().css('transform', 'translateX(-100vw)');
$(this).nextAll().css('transform', 'translateX(100vw)');
// determine offset for center of hovered word
var center = (window.innerWidth / 2) - ($(this).offset().left + ($(this).width() / 2));
// slide current word to center
$(this).css('transform', 'translateX(' + center + 'px)');
});
// when leaving animate section, reset
$('.animate').mouseleave(reset);
.animate {
background-color: orange;
color: white;
font-family: sans-serif;
text-align: center;
transition: .5s background-color, .5s color;
}
.animate:hover {
background-color: white;
color: orange;
}
span {
display: inline-block;
transition: 3s transform;
}
a {
color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">
<span>First</span> <span>&</span> <span>Second</span> <span>&</span> <span>Third</span> <span>and</span> <span>Fourth</span>
</div>
I'm having issues with my CSS positioning for a conversation/chat page. Please see the code in this fiddle for my first attempt: https://jsfiddle.net/1gsykwL5/
Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.
I think there's probably a better way of coding it to be honest. But I'm not sure how. Can anybody please advise?
Thanks!
PS - code which includes the padding fix by Rick Jelier:
body{
font-family:arial;
}
.newchat {
padding: 10px;
}
.newdiv1 {
width: 50px;
height:100%;
float: left;
margin: 0px 10px 10px 0px;
}
.chat2 ul{
list-style: none;
padding:0px;
}
.chat2 ul li
{
border-radius: 5px;
}
.chat2 ul li:hover .thumbnail {
background: #bd6982;
}
.chat2 ul li .thumbnail {
display: inline-block;
background: #bfbfbf;
width: 50px;
color: #ffffff;
line-height: 50px;
text-align: center;
text-decoration: none;
-webkit-transition: background 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s;
-o-transition: background 0.3s linear 0s;
transition: background 0.3s linear 0s;
border-radius: 50%;
}
.chat2 ul li:nth-child(2n) {
background: #f2f2f2;
}
.newdiv2 .meta {
color: #b3b3b3;
font-size: 12px;
padding-left: 60px;
}
.newdiv2 .meta a:hover {
text-decoration: underline;
}
.newdiv2 .meta a {
color: #999999;
text-decoration: none;
}
.newdiv2 h3 {
font-size:14px;
display: block;
width: 100%;
margin: 0px 0px 5px 0px;
color: #808080;
}
.newdiv2
{
font-size:12px;
color: #cccccc;
}
.newdiv2 .preview
{
display:block;
margin-bottom: 5px;
padding-left: 60px;
}
.otherUser
{
margin-left:30px;
}
<div class="chat2">
<ul>
<li>
<div class="newchat">
<div class="newdiv2">
<div class="newdiv1">
<a class="thumbnail" href="#">KS</a>
</div>
<h3>Kenny Sing</h3>
<span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi iusdh fius dhuif hsdiuf hisdu fhusid f2f2f2 siudphf uisd h
osih doifh sidoh fiusd hiuf hdsiu hiu hiu</span>
<div class="meta">3h ago · Category · Reply</div>
</div>
</div>
</li>
<li class="otherUser">
<div class="newchat">
<div class="newdiv2">
<div class="newdiv1">
<a class="thumbnail" href="#">KS</a>
</div>
<h3>Kenny Sing</h3>
<span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi</span>
<div class="meta">3h ago · Category · Reply</div>
</div>
</div>
</li>
</ul>
</div>
Try adding 60px of padding to the left of the textbox itself:
.newdiv2 .preview {
/* current css */
padding-left: 60px;
}
I tried it in the jsfiddle and it seems to work.
Hope this helps!
I see it in two ways:
position absolute of logo (+ top:10px, left:10px), and padding left + position relative to the container - with padding it shouldn't screw up your your alignment
or
Padding to the message container and negative margin to the logo
.newchat {
padding-left: 70px;
}
.newdiv1 {
margin: 0px 10px 10px -60px;
}
Less code more fun
Since you asked for leaner markup, this is how I'd approach it:
body {
background-color: #333;
}
.chat {
list-style-type: none;
}
.meta-message {
display: block;
color: #999;
margin-top: 5px;
}
.sender-message,
.reply-message {
background-color: #fff;
border-radius: 15px;
display: block;
font-family: sans-serif;
font-size: 20px;
line-height: 1.25;
max-width: 400px;
margin-bottom: 15px;
min-height: 60px;
padding: 15px 15px 15px 80px;
position: relative;
}
.sender-message::before,
.reply-message::before {
content: attr(data-shortname);
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
left: 15px;
top: 15px;
background-color: #a00;
text-align: center;
border-radius: 50%;
color: #fff;
}
.sender-message .name,
.reply-message .name {
color: #a00;
font-size: 28px;
margin: 0;
text-align: right;
}
.reply-message {
background-color: #eee;
margin-left: 80px;
}
.reply-message .name {
color: #0a0;
}
.reply-message::before {
background-color: #0a0;
}
<ol class="chat">
<li class="sender-message" data-shortname="kk">
<h3 class="name">Kenny King</h3>Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.<span class="meta-message">2016/12/13 12:41 p.m.</span>
</li>
<li class="reply-message" data-shortname="cw">
<h3 class="name">connexo websolutions</h3>Let's see how far we can get from a small codepen snippet...<span class="meta-message">2016/12/13 12:42 p.m.</span>
</li>
</ol>
https://codepen.io/connexo/pen/eBPXbd
Why did I use an ol?
Because a chat consists of a (typically chronologically) ordered list of messages (where order does matter).
I think you will be able to start from here and get to where you want to go.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I want it to be as simple as this, but I know it isn't:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img {
opacity: 0.3;
color: red;
}
JS Fiddle demo.
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.