I want to show / hide a variable on hover with help of CSS only. Here's my html:
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<p>Hover here to see magic</div>
<div>Hello World</div>
</body>
</html>
Here's my css:
:root {
--show-state: none;
--p-color: black;
}
body {
padding: 2rem;
}
body > div {
color: var(--p-color);
display: var(--show-state);
}
body > p {
border: 2px solid var(--p-color);
cursor: pointer;
padding: 1rem;
color: var(--p-color);
}
body > p:hover {
--p-color: blue;
--show-state: block;
}
When I hover to the element, the paragraph color changes however since --show-state sets to block I should be able to see the div but it still remains invisible:
I have also attached code sandbox to try it on: https://codesandbox.io/s/html-code-editor-forked-hv5teh?file=/style.css:0-251
Can someone tell me what am I doing wrong or if this won't be possible at all only via CSS?
You are changing the variables for the p element, not for the whole body (or :root) so the div isnt affected.
However, since the div comes after the p element and is its immediate sibling you can use the + combinator to affect the settings of the CSS variables for that div.
:root {
--show-state: none;
--p-color: black;
}
body {
padding: 2rem;
}
body>div {
color: var(--p-color);
display: var(--show-state);
}
body>p {
border: 2px solid var(--p-color);
cursor: pointer;
padding: 1rem;
color: var(--p-color);
}
body>p:hover+div {
--p-color: blue;
--show-state: block;
}
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<p>Hover here to see magic</div>
<div>Hello World</div>
</body>
</html>
Related
In this exercise, I have been given the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selected text</title>
</head>
<body>
<div class="container">
<div class="container_inside">
<h1>Pseudo-elements</h1>
<p class="my_paragraph">The Almighty CSS allows you to not only work with
elements declared in your HTML code but to also customize those parts of
the page you can not address using simple selectors. This might be the
customization of the first line of the paragraph, the first letter of the
paragraph, or even the part of the text user has just selected.</p>
<p>Here is the list of the most-used pseudo-elements:</p>
<ul class="my_list">
<li>::first-line</li>
<li>::first-letter</li>
<li>::placeholder</li>
<li>::marker</li>
<li>::before</li>
<li>::after</li>
<li>::selection</li>
</ul>
</div>
</div>
</body>
</html>
The task is to 'Make the text inside .my_paragraph have white color and black background when it is selected.'
Here is the CSS code that is given:
/* Write your code here */
.my_paragraph::first-line {
background: linear-gradient(90deg, #9d3ce9, #5fbf85);
color: white;
}
.my_list li::marker {
color: #9d3ce9;
}
.container {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
height: 80%;
justify-content: center;
text-align: center;
width: 60%;
}
.my_list {
text-align: left;
}
So I added this bit to the CSS section:
.my_paragraph::selection {
color: white;
background-color: black;
}
What am I missing? Why is this wrong?
Thanks in advance
Add this for selection
.my_paragraph::selection {
color: white;
background-color: black;
}
.my_paragraph::-moz-selection { color: white;
background-color: black;}
You aren't adding your style to your html file!
Add this to your html header and replace style.css by your css file name:
<link rel="stylesheet" href="style.css">
Ok, correct code has been found:
.my_paragraph::selection {
color: white;
background: black;
}
This is my super simple code and the background color isn't changing for some reason. I know that the external CSS is linked correctly because the text color of h1 is changing.
<!DOCTYPE html>
<html>
<head>
<title>random</title>
<link rel="stylesheet" href="randomnezs style.css">
<style>
body{
background-color: black !important;
}
h1 {
color: red;
}
<style>
</head>
</html>
Because your body height is 0, you can set some height for it.
body{
background-color: black !important;
height: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>random</title>
<link rel="stylesheet" href="randomnezs style.css">
<style>
body{
background-color: black !important;
height: 10px;
}
h1 {
color: red;
}
<style>
</head>
</html>
I saw an example for Twitter Favorite animation and I used in my design for testing and now i have problem with alignment for the icons and I don't know how to fix it? Can anyone explain things to me, please?
Below you will the actual code use and I need all the icon with the text to be in one column some thing similar to twitter icon but very basic one.
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
cursor: pointer;
height: 70px;
width: 70px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div><div class="heart"></div> 16</div>
</div>
</body>
</html>
The reason why your elements aren't aligning is because the div element containing your heart animation is a block-level element (versus the i elements with the font-awesome icons, which are inline).
To fix that part, you just have to add display: inline-block to the heart element. The height of your heart element is also 70px, so to align the other elements, you'll also need to add height: 70px and line-height: 70px; to your post-footer. Finally, to adjust for the fact that the heart element is much wider than the other elements, you can wrap the heart counts in a span and give it a negative margin.
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
height: 70px;
line-height: 70px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
display: inline-block;
cursor: pointer;
height: 70px;
width: 70px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart-text {
margin-left: -20px;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div class="heart"></div><span class="heart-text">16</span>
</div>
</body>
</html>
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
My CSS file:
#import "reset.css"; /* Meyer's CSS reset */
body { background-color: #f3f3f3; font: 15px sans-serif; }
#wrapper {
width: 1000px;
margin: 0 auto;
}
#navigation {
width: inherit;
margin-top: 20px;
background-color: #ccc;
overflow: hidden;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 10px 10px;
text-decoration: none;
color: #000;
}
#navigation li a:hover {
background-color: #aaa;
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Nav0</li>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
</ul>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
You should use a clear fix class (either an empty element after the <ul> or use a clear fix class on the <ul> so the browser will properly clear the floats.
.clearfix {
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Is one I use most of the time. Here is a fiddle of it in action: http://jsfiddle.net/gpQ2f/1/