So I used a codepen to implement buttons into my homepage here. The buttons work, but the issue is now the ToDo (+) button on the right, and the ToDo (x) button which appears after adding one, also have the effect of the button ToDo(+). Specifically, hovering over them has two parallel lines swing in from opposite ends. How do I separate them from each other so one doesn't affect the other? The specific css code is here:
button{
background:#00000088;
color:#fff;
border:none;
position:relative;
height:40px;
font-size:1.2em;
padding:0 1em;
cursor:pointer;
margin: 0 0.25em;
transition:800ms ease all;
outline:none;
}
button:hover{
background:#ffffff;
color:#000;
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:3px;
width:0;
background: #bd818d;
transition:400ms ease all;
}
button:after{
right: inherit;
top: 47px;
left: -5px;
bottom: 0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
This is where the problem is:
button{ /* YourStyle */}
This is telling your browser that it must apply YourStyle above everywhere where it sees a button element. And your browser, remains loyal and obeys your instructions. To solve this, you must give a button names that defines it.
Example:
<button class='todo add'></button>
<button class='todo close'></button>
Referencing these buttons with css:
/* When you want to reference all buttons */
button{} or .todo{}
/* When you wish to target the todo add only */
.todo.add{} or .add{}
/* When you wish to target the todo close only */
.todo.close{} or .close{}
try giving your buttons class names or id and referencing them from css styles.
Instead of applying styles to button, you can make use of classnames to give specific styles to separate buttons.
The classname containing common styles can be given to both, and the specific ones can be in their respective classnames.
Related
I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.
If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>
I set the opacity of .jumbotron class to opacity: 0.9; and its child elements follow through. How do I set a specific child element to override the parent's property value in this case. I tried using !important, .jumbotron a, .jumbotron p + p, .jumbotron nth:child(3), but none of them work fully. It will change the button to a lower opacity less than 0.9, but not 1, where it's suppose to be solid or in other words show no transparency. Is there maybe another way to get around this problem? Here's the focus code I tried using:
CSS:
.jumbotron{
background-color: white;
color:black;
opacity:0.9;
border-radius:0px 0px 10px 10px;
}
.jumbotron a, .jumbotron p + p, .jumbotron :nth-child(3){
opacity: 1 !important;
}
HTML:
<div class="jumbotron">
<h1 style="color:black;">Welcome!</h1>
<p>We're an awesome company that creates virtual things for portable devices.</p>
<p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p>
</div>
WORKAROUND SOLUTION:
It appears you cannot override the opacity value to a child's element when the parent's element value is already set. For instance, .jumbotron (parent) is set to opacity:0.9 and .jumbotron p + p (2nd p child element)[or whatever else you use to override the value] is set to opacity: 1 !important as seen in my above code WILL NOT WORK! Setting it < 1 will work. However, on other css properties such as color, margin, etc., it will override. With that being said, a workaround is to specifically take the button out of the .jumbotron and make a new div with the appropriate css properties as demonstrated below:
#divbtn{
position:absolute; /*type of position to freely move the element about*/
top:290px;
margin-left:30px;
}
<!--opacity cannot be overridden on a child element when the parent's element is set, so I made a new div outside of .jumbotron and make it appear as if it's in .jumbotron without opacity being affected.-->
<div id="divbtn">
<p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p>
</div>
I would recommend giving every element inside the jumbotron class a common class. For example, if the class was to be named class_name, then the css would be-
.class_name{
opacity:1;
}
If you didnt understand my answer, or this didnt solve your problem, just comment below.
The child will always inherit the opacity from its parent. So that means you can't set a different opacity for the child element.
Another solution is instead of using opacity you can use rgba method.
However here is a workaround method, have a look and may be work for you. Check the DEMO.
.jumbotron{
background-color: white;
color:black;
border-radius:0px 0px 10px 10px;
position: relative;
width:100%;
}
.container {
position:relative;
width:100%;
}
.holder {
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background-color:#FFF;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
z-index:1;
}
.jumbotron p:last-of-type{
position: relative;
width:100%;
z-index:2;
opacity: 1;
filter:alpha(opacity=100);
}
I am creating a set of styles for a dynamic breadcrumb.
Every previous step in the breadcrumb should have a border-bottom and a forward slash. The forward slash is done as a :before.
The problem is when there is a forward slash between two previous step's, there is no gap in the border on the right side.
To explain this problem better, please see this codepen... http://codepen.io/anon/pen/dJEen
I have tried doing a border-bottom:0 on the :before but this does nothing.
My code:
HTML
<div>
<a class="bcrmb" href="">Purchases</a>
<a class="bcrmb" href="">Order </a>
<span class="bcrmb">Delivery</span>
</div>
CSS
.bcrmb {
font-size:24px;
font-weight:bold;
margin: #6px 0;
display:inline-block;
letter-spacing:-1px;
font-family:sans-serif;
}
a.bcrmb {
color:#777;
border-bottom:2px solid #777;
margin-right:3px;
}
span.bcrmb {
color:#333;
}
a.bcrmb + .bcrmb:before {
content:"/";
margin-right:6px;
border-bottom:0;
}
Any help would be greatly appreciated.
You can do that in two ways, either by wrapping the text in a span element and assigning the border-bottom to span else you can use CSS positioning, by using absolute on the :before and relative to a
Demo (Using nested span elements)
Demo (Using CSS Positioning)
a.bcrmb {
color:#777;
border-bottom:3px solid #777;
margin-right:3px;
position: relative;
margin-right: 15px;
}
a.bcrmb + .bcrmb:before {
content:"/";
margin-right:6px;
border-bottom:0;
position: absolute;
left: -10px;
}
Also make sure you use text-decoration: none;, you aren't using that
In addition to Mr. Alien comment,
Using nested <span> is not always an option, because sometimes there is no access to HTML code.
Positioning of absolute element is not a good idea, because it will be hard or impossible to properly position it for different font sizes, font families, styles, or on different devices or screen sizes. Even on the demo link provided, arrow is a bit off on my screen.
So, I would add the third way, by adding a relative to parent (em), negative right margin to pseudo element.
Demo
a {
text-decoration: none;
}
.bcrmb {
font-size:24px;
border-bottom:3px solid #777;
}
.bcrmb:after {
content:">";
padding-left: 4px;
margin-right: -0.75em;
}
I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 7 years ago.
I have a menu in which onHover apears a infobox, telling what the button does. How can I apply a delay so that the box apears let's say one second after i put my mouse over the button?
HTML:
<td class="info"><a id="login-edit_account" href="../login-edit_account.php">Edit account<span><div id="pointer"></div><p style="font-size:11px">Edit user's information.</p></span></a></td>
CSS:
td.info {
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none
}
td.info:hover {
z-index:25;
background-color:#fff
}
td.info span {
display: none;
transition: 0s display;
}
td.info:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
top:42px; left:7px;
width:210px;
border:2px solid #0cf;
padding: 5px;
background-color:#fff; color:#000;
text-align: center;
-webkit-transition-delay:5s;
}
#pointer {
border:solid 10px transparent;
border-bottom-color:#0cf;
position:absolute;
margin:-27px 0px 0px 10px;
}
It's really pretty simple. Example:
a {
-webkit-transition: 1s 3s;
}
a:hover {
background-color: red;
}
When the user hovers the link, the browser waits 3 seconds. Only when those seconds have passed does the background transition to red (in this case with a 1s transition time).
Here's a fiddle: http://jsfiddle.net/joplomacedo/VP7hE/
Yes, you can use CSS3's transitions to delay the :hover effect.
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
In your case I believe you need to focus on the transition-delay property.
Here are a few useful links in regard to using transitions/example use cases:
https://developer.mozilla.org/en-US/docs/CSS/transition-delay
http://css-tricks.com/transition-delay-delays/
http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/