Expand/collapse div on hover - not collapsing when not active

Expand/collapse div on hover - not collapsing when not active - javascript

I have some divs set up so they expand when you hover on them, but at the moment they aren't closing when you don't hover on them, it just stays on the last one you hovered on. How can I get it so they are all closed if you aren't hovering on one?
JS
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
tiles.removeClass('active');
$(this).addClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
CSS
.buttons .button h4 {
z-index:3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position:relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
padding: 15px;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
font-size: 81px;
}
.buttons .active p {
opacity: 1;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.buttons .active h4 {
margin-top: 15px;
display:none;
}
HTML
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test.jpg" alt="" />
<h4 style="color:black;">Documents</h4>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

hover can take a second function as a parameter which adds a handler for when the mouse leaves the element. You could remove the class again in there:
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})

$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
Its example from https://api.jquery.com/hover/
You can also use mouseover() and mouseout() if you want to do that differently.

Related

Recreate Adobe Portfolio Dual Hover Effect On Image & Text Block

ive been trying to recreate the hover dual effect that is on https://andreas-demo.myportfolio.com/
However i cant seem to get both to align correctly and then i cannot get the affect that hovers over the entire section but that changes BOTH: 1- Darkening the image, 2 -inversing the colors.
I want to be able to get both affects to happen while hovering over the entire block, just like on the site above^.
Here's my code;
img {
display: block;
width: 60%;
height: 450px;
background-color: #f2f2f2;
!important;
-webkit-filter: brightness(100%);
}
a img:hover {
-webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.media {
background-color: #f2f2f2;
!important;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<a href="">
<div class="media">
<img src="img/pexels-photo-733438.jpeg" class="img-fluid" alt="Responsive image">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>

On container:hover, set your container'background-color as black (default to white) and set the image opacity as 0.5.

Move the :hover pseudo-class to one of the 3 parent (wrapper) elements -
.container, .container > a, or .media element. This will have the effect of adding the overlay to both elements on :hover.
Like this:
.container {
font-family: Arial;
}
.container:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container__link {
display: flex;
text-decoration: none;
}
.media {
flex: 6;
background-color: #222222;
}
img {
display: block;
width: 100%;
height: 450px;
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container:hover .media img {
opacity: 0.3;
}
.description {
flex: 4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color: #ffffff;
color: #222222;
}
.container:hover .description {
background-color: #222222;
color: #ffffff;
}
p {
padding: 0;
margin: 0;
}
<div class="container">
<a href="" class="container__link">
<div class="media">
<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
<div class="description">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>

responsive side navigation menu with hamburger icon

simple menu header when not opened
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
#import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
body,
html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Arimo', sans-serif;
}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
right: 0;
background-color: #EF8354;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #EF8354;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right {
position: fixed;
right: 40px;
top: 20px;
}
.nav-right.visible-xs {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right.visible-xs .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
.button.active .middle {
width: 0;
}
.move-to-left {
-webkit-transform: translateX(-400px);
-moz-transform: translateX(-400px);
-ms-transform: translateX(-400px);
-o-transform: translateX(-400px);
transform: translateX(-400px);
}
nav {
padding-top: 30px;
}
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
.ua {
position: absolute;
bottom: 20px;
left: 60px;
}
.fa {
font-size: 1.4em;
color: #EF8354;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ua:hover .fa {
color: #FFF;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#media (min-width: 480px) {
.nav-list {
display: block;
}
}
#media (min-width: 768px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
.visible-xs {
display: none;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive">
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<a href="https://codepen.io/tonkec/" class="ua" target="_blank">
<i class="fa fa-user"></i>
</a>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">About Us</li>
<li class="sidebar-item">What We Do</li>
<li class="sidebar-item">Get Involved</li>
<li class="sidebar-item">Contact Us</li>
</ul>
<hr>
</div>
hello the above code is for side navigation bar.it works fine for me but the problem i am facing is when i click on the hamburger icon it pull or slide my main section to the left side.i don't want to slide my background content or main content to be slide left side & my close button is to be display on right side of menu body section.but it display outside or aside of the menu bar.as well i want to make my menu shrink or resize on page scroll.menu design

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- nav-right -->
<main>
<nav>
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive">
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<a href="https://codepen.io/tonkec/" class="ua" target="_blank">
<i class="fa fa-user"></i>
</a>
</main>
<div class="sidebar">
<span class="glyphicon glyphicon-remove pull-right" id="close-button" style="color: white;font-size: 30px;"></span>
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">About Us</li>
<li class="sidebar-item">What We Do</li>
<li class="sidebar-item">Get Involved</li>
<li class="sidebar-item">Contact Us</li>
</ul>
<hr>
</div>
<style>
#import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
body,
html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Arimo', sans-serif;
}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right: 0;
background-color: #EF8354;
display:none;
z-index: 3;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #EF8354;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right {
position: fixed;
right: 40px;
top: 20px;
}
#btn-close {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#btn-close .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
nav {
padding-top: 30px;
}
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item {
opacity: 3;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
.ua {
position: absolute;
bottom: 20px;
left: 60px;
}
.fa {
font-size: 1.4em;
color: #EF8354;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ua:hover .fa {
color: #FFF;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#media (min-width: 480px) {
.nav-list {
display: block;
}
}
#media (min-width: 768px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
#btn-close{
display: none;
}
}
</style>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$(this).hide();
$(".sidebar").css('display','block');
});
$("#close-button").on("click", function() {
$('#btn').show();
$(".sidebar").css('display','none');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
}
});
});
</script>
This is what you asked for? I have added close glyphicon instead of button.Hope this resolves your issue.

Change background-image on li hover; how to change back when I get of the li? [duplicate]

This question already has answers here:
Removing Class with Mouse Exit
(7 answers)
Closed 5 years ago.
I want to change the background image of a div when I hover over a li element. This I have figured out, as you can see in this https://jsfiddle.net/7zpt7g6b/! :) The only thing is that I want to change the pic back to the original CSS when I hover of the li element (hope I'm being clear). Now the div of the background-image keeps having the image of the last li I have hovered on. I want this to change back
My HTML
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE I</li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">CASE II</li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg">CASE III</li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE IV</li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>
My CSS
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
My JS
var links = $(".projects li");
links.on("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+url+")");
});
It's probably just a simple edit on the Jquery, but I can't seem to find out what I have to add/change.
Thank you! I hope I'm being clear (if not I'd love to explain more)

You can add this mouseout function to the JS, using the URL of the background-image in your original CSS rule:
links.on("mouseout",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url('https://www.aviary.com/img/photo-landscape.jpg')");
});
https://jsfiddle.net/t0n0u5yv/

Here you go! use .mouseleave()
var links = $(".projects li"),
sDefaultUrl = 'https://www.aviary.com/img/photo-landscape.jpg';
links
.mouseover(function(){
var sUrl = $(this).attr("data-background");
$("#background").css("backgroundImage","url(" + sUrl + ")");
})
.mouseleave("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url(" + sDefaultUrl + ")");
});
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE I</li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">CASE II</li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg">CASE III</li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE IV</li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>

You can use jQuery's mouseleave event.
https://api.jquery.com/mouseleave/
links.mouseleave(function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+[your-original-url]+")");
});

How to make one item selected at a time?

At the default state I want 'ALL' to be selected. Click on another item will change all other classes so that 'this' has the class and the others don't. My problem is why can't 'ALL' be re-selected?
jsFiddle: http://jsfiddle.net/u5g9vLkx/
HTML:
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
CSS:
body{
background: #000000;
}
.nav2{
float: none;
list-style-type:none;
overflow: hidden;
clear: both;
text-align: left;
display: inline-flex;
}
.nav2 li{
clear: both;
overflow: hidden;
margin-left: 10px;
}
.orange{
opacity: .5;
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange:hover{
opacity: 1;
color:#000000;
background: #FF9000;
}
.orange2{
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #FF9000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange2:hover{
color:#000000;
background: #FF9000;
}
Javascript:
$('a.orange').click(function(){
$('a.orange2').addClass('orange');
$('a.orange').removeClass('orange2');
$(this).removeClass('orange');
$(this).addClass('orange2');
});

In your Javascript code you are applying the onClick listener only to a.orange (a elements with the class orange)
$('a.orange').click(function(){ ... });
Since the "ALL" menu entry does not have orange, but orange2 as its class, it is not affected by that.
You can fix this by including a.orange2 in the selector:
$('a.orange, a.orange2').click(function(){ ... });

Maybe something like that :
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
$('a.orange2').click(function(){
$('a.orange2').removeClass('orange2').addClass('orange');
$(this).addClass('orange2').removeClass('orange');
});
http://jsfiddle.net/khzehpfx/

add css transition time to toggle class using javascript

I want to add a transition time to my pure javascript toggle class function
I knew how to code it but i forgot and now need some advice
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div{
width: 200px;
height: 150px;
}
.class1 {
color: #f00;
background-color: #2fadac;
}
.class2 {
color: #00f;
background-color: #c33;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
style.cssText ="-webkit-transition: all 0.5s ease-in-out;";
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
</body>
</html>
any help would be appreciated

Try add the rule for transition in your target class itself.
.class1 {
color: #f00;
background-color: #2fadac;
-webkit-transition: all 0.5s ease-in-out;
}
.class2 {
color: #00f;
background-color: #c33;
-webkit-transition: all 0.5s ease-in-out;
}
Demo
Or just apply the rule in a separate rule:
CSS:-
.class1 {
color: #f00;
background-color: #2fadac;
}
.class2 {
color: #00f;
background-color: #c33;
}
.transition{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
HTML:
<div id="div" class="class1 transition">click here</div>
Demo

Add transition on your CSS
#div{
width: 200px;
height: 150px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
DEMO

Develop Reference

JavaScript is the programming language of the Web.

Expand/collapse div on hover - not collapsing when not active - javascript

hover can take a second function as a parameter which adds a handler for when the mouse leaves the element. You could remove the class again in there: tiles.hover(function(){ $(this).addClass('active'); }, function() { $(this).removeClass('active'); })

$( "td" ).hover( function() { $( this ).addClass( "hover" ); }, function() { $( this ).removeClass( "hover" ); } ); Its example from https://api.jquery.com/hover/ You can also use mouseover() and mouseout() if you want to do that differently.

Related

Recreate Adobe Portfolio Dual Hover Effect On Image & Text Block

responsive side navigation menu with hamburger icon

Change background-image on li hover; how to change back when I get of the li? [duplicate]

How to make one item selected at a time?

add css transition time to toggle class using javascript

Categories

Resources