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;
}
Related
Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
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']);
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);
}
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";
}
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533