I have small problem with css and jQuery. I have 2 buttons and I want to set the background of the one clicked to blue, and I want to do this with 'active' css property. It is not working for some reason. Whenever the button is not active anymore, it loses the background color. Here is the code:
HTML:
<div id = 'hey'>
<div class = 'b' id = 'b1' href="#">Button one</div>
<div class = 'b' id = 'b2' href="#">Button Two</div>
</div>
CSS:
body,html {
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #000;
}
#hey {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
.b {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
.b:active {
background-color: blue;
}
JS:
$(".b").click(function() {
$(this).addClass('active');
});
:active is a pseudo-class meaning "while being activated" (typically while the mouse button is held down over it).
You are giving it a class active so you need to use a class selector: .active (with a . not a :).
I suggest not using class names which match pseudo-class names as it is an easy source of confusion.
:active is pseudo-element and you are trying to add active as a class. So the CSS should be
.b.active {
background-color: blue;
}
Related
I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.
I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.
It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>
I'm using an Accordion which is built of buttons, I've got the 'plus' and 'minus' signs as ':after'
So far I've tried 'justify-content: center' within the button, I've also tried 'vertical-align: middle', neither had any effect and when I tried to wrap a div around the button to implement the styling on that button, it stopped the accordion from working.
I also am having trouble when on a thin screen the plus sign is coming into the text, it's currently floating to the right but there is no designated space between them to stop a crossover.
All the code I've tried to use to centrally align this element i haven't got to work, please see below:
Here is the code:]
HTML:
<button class="accordion">Where is your company located?</button>
<div class="panel">
<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>
</div>
<button class="accordion">What is the warranty and return policy?</button>
<div class="panel">
<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>
</div>
<button class="accordion">Does the product have a specific method of operation? Is it easy to use?</button>
<div class="panel">
<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>
</div>
CSS:
.accordion {
background-color: white;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
color: #262626;
font-size: 18px;
font-weight: 700;
font-style: normal;
font-family: 'Lato';
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: white;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 18px;
font-family: 'Lato';
color: #262626;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
The javascript, incase it helps at all:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Thanks if you can help.
Dale.
May be this can help you. I added an <span> due to control both parts and then display: flex;
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
background-color: red;
color: #444;
cursor: pointer;
width: 100%;
text-align: left;
outline: none;
transition: 0.4s;
color: #262626;
font-size: 18px;
font-weight: 700;
font-style: normal;
font-family: 'Lato';
border: 0;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: white;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion span:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 18px;
font-family: 'Lato';
color: #262626;
padding-left: 20px;
}
.accordion.active span:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<button class="accordion">Where is your company located? <span></span></button>
<div class="panel">
<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>
</div>
<button class="accordion">What is the warranty and return policy?<span></span></button>
<div class="panel">
<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>
</div>
<button class="accordion">Does the product have a specific method of operation? Is it easy to use?<span></span></button>
<div class="panel">
<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>
</div>
This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button(I haven't tried for other elements like span or div but I believe it works the same, if not pardon my guess) upon increasing the font-size(to any extent) regardless of font-family used.
Consider this an alternative to what has already been answered by Alberto Rhuetras.
Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.
Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)
/* common style */
.minus, .plus {
height: 50px;
width: 200px;
background: #216AFF;
color: white;
}
.minus {
font-size: 70px;
display: flex;
justify-content: center;
line-height: 35px;
}
.plus {
font-size: 50px;
display: flex;
justify-content: center;
line-height: 45px;
}
.demo {
font-size: 18px;
padding: 18px;
width: 100%;
text-align: left;
display: flex;
}
.demo::after {
content: "\02795";
font-size: 18px;
float: right;
line-height: 23px;
justify-content: center;
align-content: flex-start;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>
<br>
<button class="demo">Does the product have a specific method of operation? Is it easy to use? What is the warranty and return policy?</button>
Use display-flex on the button and use the value of line-height to position the plus or minus sign vertically within the button. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward. Thanks!
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 5 years ago.
This is what I have:
I have a div id="navbar" and various styles for the ul and li elements there.
Now I want to know, if there is any selector in CSS where I can say "the following css-styles shall only be aplliedd to children of #navbar"
something like:
/* ***** NAVBAR ****** */
#navbar {
/* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
.active {
background-color: #4CAF50;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
}
are there any ways to apply various css-styles only to elements that are chil or child-child or child-..-child of a certain HTML-element?
Note I'm also using jQuery so if thats only possible with jQuery, it will not be a problem.
sincerly basti
You're looking for the descendant combinator: A space. For instance:
#navbar li {
/* styles */
}
That will only apply the styles to li elements that are descendants of #navbar.
You have to use it on every rule. If you want syntax more like what you have in your question, there are preprocessors that do that sort of thing: Sass, Less, and such.
But with just CSS itself, you need to repeat the #navbar on every rule.
Direct Children
#parent > #child {
color: #fff;
}
Descendants
#parent #descendant {
color: #fff;
}
CSS :hover works when I use it for it's own element, but when i tried to affect another element, it had no effect.
For example, when I hover this button, the hidden links should appear, but they do not.
.dropdown {
position: relative;
display: inline-block;
border: 1px solid black;
width: 200px;
}
.dropbutton {
width: 100%;
height: 60px;
color: white;
background: #017678;
border: none;
}
.dropcontent a {
color: black;
text-align: center;
line-height: 40px;
text-decoration: none;
height: 40px;
background-color: #DDD;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #9fa0a8;
display: none;
}
a:last-of-type {
border: none;
}
.dropbutton:hover .dropcontent {
display: block;
}
<div class="dropdown">
<button class="dropbutton">SHOW CONTENT</button>
<div class="dropcontent">
c1
c2
c3
</div>
</div>
A space is a descendant combinator. It targets descendants, but the div is not a descendant of the button, it is a sibling.
You need to use the adjacent sibling combinator instead: a plus sign.
You also need to target the links (which are descendants of .dropcontent so you should use a descendant combinator there) since it is those which you have set display: none on and not the div.
.dropbutton:hover + .dropcontent a {
Are you using Javascript to do this?
var button = document.getElementsByClassName('.dropbutton')[0],
menuContent = docuemnt.getElementsByClassName('.dropcontent')[0];
button.onmouseover = function(event) {
menuContent.style.display['block'];
}
button.onmouseout = function(event) {
menuContent.style.display['none'];
}
With a slight change to your CSS: .dropbutton should have display: none, and you should remove the display: none from .dropcontent a
I'd move the display: none; to the .dropcontent itself - as it now pertains to its anchors, that is, links, and as such, neither current answer would work -, then use
.dropbutton:hover + .dropcontent
{
display: block;
}
But you must not add anything between dropbutton and dropcontent afterwards, or it will not work any more.
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}