Is there anyway that I can get my CSS only to go through the hover cycle once?
I need to keep the CSS intact and ADD a solution rather than completely changing it.
This maybe impossible, but I thought I'd ask.
CSS:
html .sensitive10, .sensitive5, .sensitive75, .sensitive15, .dp{
opacity: 1.0;
-webkit-transition: 5s all ease-in-out;
-webkit-transition-delay: 60s;
}
html:hover .dp{
opacity: 0.0;
-webkit-transition: all 5s ease-in-out;
-webkit-transition-delay: 16s;
}
#box{
height: 60px;
width: 60px;
background: #0DF;
}
HTML:
<html>
<body>
<div id="box" class="dp"></div>
<body>
</html>
Thanks
You can do this with jQuery .one() function, here is the reference:
http://api.jquery.com/one/
And the relevant example:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="count">0</div>
<div class="target">Hover me</div>
<script>
var n = 0;
$(".target").one("mouseenter", function() {
$(".count").html(++n);
});
</script>
</body>
</html>
What you need is an onmouseout with a javascript function that would change your element's className to a css class that would not have a hover defined.
CSS
.element_with_hover{(...)}
.element_with_hover:hover{(...)}
.element_without_hover{(...)}
HTML
<div class="element_with_hover" id="hoverMe" onmouseout="javascript:removeHover('hoverMe');"></div>
JAVASCRIPT
function removeHover(elementId){
document.getElementById(elementId).className = "element_without_hover";
}
Related
This question already has answers here:
How to create a ::before for multiple #id
(1 answer)
Shorten verbose CSS that repeats combinations of elements and pseudo-classes
(1 answer)
Closed 1 year ago.
#MainPage-OpenMenu:hover path:nth-child(1) {
fill: #49ffad;
transition: 1s;
}
#MainPage-OpenMenu:hover path:nth-child(2) {
fill: #49ffad;
transition: 1s;
}
As you can see my code is repeated. How can I make it shorter to avoid duplicate code ?
You can use :is():
#MainPage-OpenMenu:hover path:is(:nth-child(1), :nth-child(2)) {
fill: #49ffad;
transition: 1s;
}
https://www.w3.org/TR/selectors-4/#matches
Use a comma in between selectors to apply the same css to multiple selectors. For example,
#MainPage-OpenMenu:hover path:nth-child(1), #MainPage-OpenMenu:hover path:nth-child(2) {
fill: #49ffad;
transition: 1s;
}
See snippet for a similar example.
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
#div1, #div2 {
background-color: red;
}
<div id="div1"></div>
<div id="div2"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.tempdiv:hover > div > :nth-child(1) {
color: red;
}
.maindiv:hover > div > :nth-child(1),
.maindiv:hover > div > :nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div class="tempdiv">
<h3>However on div and change color of first child</h3>
<div>
<h1>Mango</h1>
<h1>Orange!</h1>
</div>
</div>
<div class="maindiv">
<h3>However on div and change color of first and second child</h3>
<div>
<h1>Mango</h1>
<h1>Orange!</h1>
</div>
</div>
</body>
</html>
Simple and straight forward example to clear everything you are looking for. I hope this will answer the question
You can add more with " , " check this page for more info. https://www.w3schools.com/css/css_selectors.asp
#MainPage-OpenMenu:hover path:nth-child(1),
#MainPage-OpenMenu:hover path:nth-child(2) {
fill: #49ffad;
transition: 1s;
}
I'm attempting to build an app with Ionic framework and Angular, but everything I try to make a smooth rotation animation on a div element isn't working properly. I need it to happen every time I click a button. The div element is separate from the button. I would like it to rotate 360 degrees and be repeatable.
I don't really have any code for you guys because I don't know how to do this! Any help would really be appreciated.
ng-click combined with CSS3 transform:rotate() from 0-360 degrees is one approach. Here is a working example:
http://play.ionic.io/app/7ab32156c805
css
#box {
margin: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Spin Click Demo</h1>
</ion-header-bar>
<ion-content class="padding">
<div id="box" ng-class="divClass"></div>
<button class="button button-assertive" ng-click="divClass='spin'">Spin</button>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic']);
So I've recently started learning angularJS and wanted to understand how you do animations. I do have experience with jQuery and know how easy it is to implement animation with it however with angular...not so much.
Anyways the code looks like this:
html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="js/controllers/indexCtrl.js"></script>
<link href="css/stylesheet.css" rel="stylesheet"/>
<link rel="css/animate.css" type="text/css" href="">
<title>Test</title>
</head>
<body ng-app="myApp" ng-controller="indexCtrl">
<div ng-repeat="i in vec">
<div class="test1"><h1>{{i}}</h1></div>
</div>
</body>
</html>
css:
html,body{
height: 100vh;
width: 100vw;
}
.test1{
width: 100vw;
height:10vh;
text-align:center;
background:red;
margin-bottom:1vh;
}
.test1.ng-enter{
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
So what I want to learn is how to fadeIn the repeated elements.
Peace.
I have a simple div element with red background and text on it. I wish this element will have a rotation and a skew. What happens as a result of my code is that the text is rotated, not the whole div element. How can I solve this?
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title></title>
<style>
#CssElement {
position:absolute;
top:250px;
left:250px;
width:200px;
height:200px;
background-color:red;
-webkit-transform:skew(-15deg,-30deg) rotate(180deg);
font-size:40px;
}
</style>
</head>
<body>
<div id="CssElement">Look how I am drawn</div>
</body>
</html>
This is how the element renders on screen:
If you don't want the text to be affected, add another element and apply inverse of the transform:
fiddle
<div id="CssElement"><span>Look how I am drawn</span></div>
CSS:
#CssElement span {
display: inline-block;
-webkit-transform: rotate(180deg) skew(15deg, 30deg);
transform: rotate(180deg) skew(15deg, 30deg);
}
I'm trying to transform a pic on some event.. say click. It's working fine in chrome in linux and even XP, but chrome in windows 7 or 8 is not displaying it properly.
If u open the link below in firefox and chrome in windows 7 or 8, u will know what my problem is.
http://blacksheepinc.in/temp.php
Example Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
function rtt() {
$('#logo').css('-webkit-transition', 'all 2s ease-in')
$('#logo').css('-moz-transition', 'all 2s ease-in')
$('#logo').css('-webkit-transform','rotate(270deg)');
$('#logo').css('-moz-transform','rotate(270deg)');
}
</script>
</head>
<body>
<pre>
Click on the pic
</pre>
<img id='logo' src='logo.png' onclick='rtt()' style='position:absolute;'/>
</body>
</html>
Anyone else faced it?
Thank you for your time!!!
Have you tried making this more CSS and less JS? I trust CSS with my animations more than jQuery. Like this:
<style type="text/css">
.logo {
-webkit-transition:all 2s ease-in;
-moz-transition: all 2s ease-in;
}
.logo.end {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}
</style>
<script type='text/javascript'>
$('#logo').click(function() {
$(this).addClass('end');
});
</script>