I was wondering if it is possible to activate the hover effect of multiple elements to when hovering over a single element.
Use case: I want to have a section that is colourless, greyed out. When the user scrolls over the section containing all of the greyed elements, all elements smoothly transition to the on hover colours...
Example of the effect:
It is possible to do this with CSS when you set :hover selector on the parent element, something like:
.parent > div {
background: grey;
padding: 10px;
margin: 10px 0;
transition: background 0.4s;
}
.parent:hover > div {
background: blue;
}
<div class="parent">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
If you would need to set :hover on the child elements for some reason, you can use JavaScript.
Assuming your two sections have the classes section1 and section2, you can use something like:
$(".section1").on({
mouseenter: function () {
//choose what to do on hover
this.style.setProperty('background-color','//section1 color');
$('.section2', this)[0].style.setProperty('background-color','//section2 color');
},
mouseleave: function () {
//choose what to do on mouse leave
}
});
Is this something similar that you are looking for
children = $('.col-sm-2')
$('.col-sm-2').mouseover(function() {children.addClass('bg-danger text-white transit')})
$('.col-sm-2').mouseleave(function() {
children.addClass('exit')
children.removeClass('bg-danger text-white');
})
.transit {
transition: background-color 1s ease;
}
.exit {
transition: background-color 1s ease-out;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row border p-4 ">
<div class="col-sm-12 m-1">
Mouser over a child element below
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 1
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 2
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 3
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 4
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 5
</div>
</div>
Related
Hello guys im trying to make 2 different move in effect when i scroll on my web (show from right and shown from left). How can i make it ? can somebody help me please, i already manage to make them show from the left side, how can i make the right part
Here's my code:
Reveal from left side
<div class="container-fluid padding salimheader">
<div class="row padding">
<div class="col-lg-12 text-center reveal">
<h1>Salim Group</h1>
<hr style="width:15%; border:3px solid; color:#caa461; margin:auto;">
<br>
</div>
</div>
</div>
Reveal from right side
<div class="container-fluid padding">
<div class="row padding">
<div class="col-lg-12 text-center reveal">
<h1>Sayung Group</h1>
<hr style="width:15%; border:3px solid; color:#caa461; margin:auto;">
<br>
</div>
</div>
</div>
.reveal{
position: relative;
transform: translateX(-150px);
opacity: 0;
transition: all 1s ease;
}
.reveal.active {
transform: translateX(0px);
opacity: 1;
}
Javascript code:
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i=0; i< reveals.length; i++){
var windowheight= window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
}
You could use a second reveal class which just has a positive 150px translate instead of negative:
.reveal-right {
transform: translateX(150px);
}
You'll need to add both the reveal and the reveal-right class to any div you want this to work on.
I have a layout structure like a row with two columns, at the page start i should see only one column with full screen width, so i set it to col-sm-12 while once an event is triggered i have to show the right side column with column set to col-sm-4 and the main column from col-sm-12 should become col-sm-8.
So the layout looks like this and i've made an example that when the col-sm-12 is clicked i'd show the other column:
$('.main').on('click', function() {
$('.main').removeClass('col-sm-12')
$('.main').addClass('col-sm-8')
$('.side').removeClass('d-none')
})
html,
body {
height: 100%;
}
.main {
background-color: #ff23;
}
.side {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-12 main">
</div>
<div class="col-sm-4 d-none side">
</div>
</div>
</div>
At this how could i animate the column width change from col-sm-12 to col-sm-8?
i would do something like the hidden column will push the other by stretching it or any other fancy animation...
I think the transition css property should do the thing, but I am not sure. Try to set:
div[class*="col-"] { transition: .3s ease; } and let me know.
The website I'm currently working on is here (map section):
http://vtx.canny-creative.com/
I'm currently facing two problems:
The 'active' class adds to the .location-card on the left. But I also need the corresponding .dot on the right hand side to have 'active' added to it. Which I can do. However...
What I can't do, is get the "first loaded/visible" DIVs, "selected dot", to have 'active' applied. So the active will only apply on click, rather than "on load" and then "on click" as I cycle through them.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});
.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-6 cell card-container">
<div id="card1" class="location-tile card">
Card Info Here
</div>
<div id="card2" class="location-tile card">
Card Info Here
</div>
<div id="card3" class="location-tile card">
Card Info Here
</div>
</div>
<div class="large-6 cell map-container">
<img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>
I've created something using the jQuery fiddle here:
https://jsfiddle.net/harishkommuri/xc8ebuf4/
I'm officially answering this mainly because I can't stand unanswered questions, then again, it might be helpful to those on an off-day or those just starting out.
You can simply add the active class in your HTML to the elements that should have the class on pageload:
<div id="card1" class="location-tile card active">
Another option is to add the active class with jQuery either before or after your event-handler:
$('#card1').addClass('active');
I have two divs A and B. div A is an image. Div B is a paragraph underneath div A.
I am trying to make it so that if I put the mouse over div A, the background and font colour of div B transition to different colours without affecting div A.
I currently have the :hover selector so div B changes if someone hovers over it. But I don't know how to affect div B while hovering over div A.
Any clues on how to achieve this?
EDIT:
Please see below for the structure of my code. I'm trying to make it so that if I hover over #image1, the background of #info1 and the font colour of its paragraph would change and so on so forth for the other two images.
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out"> 1 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image2" src="res/images/aimage2.png" class="img-responsive center-block">
</div>
<div id="info2" class="col-md-12 col-sm-6">
<p class="washed-out"> 2 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image3" src="res/images/animage3.png" class="img-responsive center-block">
</div>
<div id="info3" class="col-md-12 col-sm-6">
<p class="washed-out"> 3 </p>
</div>
</div>
</div>
</div>
css:
.washed-out{
background: white;
color: black;
transition: background-color 300ms linear, color 1s linear;
}
.washed-out:hover{
background: black;
color: white;
}
You use the sibling selector ~ or the immediate sibling selector +
img:hover + div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
Update based on comment, possible CSS version
.hoverme:hover + div .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6 hoverme">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>
Update based on comment, possible JS version
window.addEventListener('load', function() {
var imglist = document.querySelectorAll('img.img-responsive');
for (var i = 0; i < imglist.length; i++) {
imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos');
})
imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos');
})
}
})
div.infos .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>
You're looking for the adjacent sibling selector - element:hover + element:
.container {
width: 100px;
height: 100px;
background: red;
transition: all 0.5s;
}
.container:first-child {
margin-bottom: 10px;
}
/** if the 1st element is hovered, changed the 2nd **/
.container:hover + .container {
background: blue;
color: white;
}
<div class="container">Div 1</div>
<div class="container">Div 2</div>
What you want can be done by javascript event handler.
Something like this:
var d1 = document.getElementById("div1"); // on hover on this div
var d2 = document.getElementById("div2"); // bring changes to this
d1.addEventListener("hover", callfun, false);
function callfun(){
d2.style.backgroundColor = 'blue';
}
Good luck
Basically you need to register a hovering in and out handler as shown in the following answer:
Event listener hover changing other element
Here is a slightly modified version of it to fit more closely to your need.
document.getElementById("Div-A").addEventListener("mouseenter",function (){
document.getElementById("Div-B").style.backgroundColor = "red";
document.getElementById("Div-B").style.backgroundColor = "Yellow";
});
document.getElementById("Div-A").addEventListener("mouseout",function (){
document.getElementById("Div-B").style.backgroundColor = "";
document.getElementById("Div-B").style.text = "";
});
Use successor siblings ~ or immediate successor siblings + to make any change on hover
img:hover ~ div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
<div>Hey there...I also get red when you hover the image</div>
<script>
function Myfunc1(){
document.getElementById("div1").style.backgroundColor = "green"
document.getElementById("div2").style.backgroundColor = "white"}
function Myfunc2(){
document.getElementById("div2").style.backgroundColor = "red"
document.getElementById("div1").style.backgroundColor = "white"}
</script>
<pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div>
<div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>
I have a dashboard type page on the left i have tabs & right i have content of the respective tab. I am using bootstrap so i made 2 columns 1 for tab & other for it's contents but my problem is that the border of tabs is not covering the entire height of the content i want it to cover the full height so i have written a jquery that will set the height of the last tab ("#ws") but that work only on page load not on button click.
TLDR
1) Go to http://kwebmakerusa.com/whp/v3/dashboard.html
2) Can you see the border-right of the tab it's height is same as the content on the right
3) click any other tab eg:address book. Notice the height shrinks
What i am trying to do is keep the height same as the content on the right
here is my html :
<div class="col-md-2 col-sm-3 hidden-xs nopadding">
<div id="dtnavs">
<div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
<div class="col-md-12 tabtxt" id="cartt">My Cart</div>
<div class="col-md-12 tabtxt" id="addresst">Address Book</div>
<div class="col-md-12 tabtxt" id="ordert">My Orders</div>
<div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
<div class="col-md-12 tabtxt" id="newst">Newsletters</div>
</div>
<div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamicaly-->
</div>
On click
$("#addresst,#mtab3").click(function() {
$('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
$('#addtab').slideDown(500);
$(".dashnav").find(".active").removeClass("active");
$(this).addClass("active");
setwsheight("#addtab");
$(".ccatname,#bcactive").text("Address Book");
console.log(this);
return false;
});
setwsheight();
function setwsheight(sh){
$('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
console.log(str);
console.log(sh+" height : "+$(sh).height());
console.log("dtnavs height : "+$('#dtnavs').height());
console.log("WS height :" +$('#ws').height());
};
without jquery
I have change some Your HTML Code Like
Remove this class in content tab left40
Apply this css your content side parent content like col-md-10 col-sm-9 col-xs-12 nopadding
.selector {
border-left: 1px solid #ccc;
margin-left: -1px;
padding: 0 0 0 40px;
}
apply this css tab content col-md-2 col-sm-3 hidden-xs nopadding
.selector{
background: #fff none repeat scroll 0 0;
position: relative;
z-index: 999999;
}
Try this.
var newHeight=your calculation;
$('#ws').animate({
height:newHeight+"your unit"
},yourDelay,function(){});
Also if that still doesn't work, try making the #ws element's position property absolute in a CSS file, along with the code posted in this answer.