Highlight element then transition back to original color - css

I have elements with different background-colors. When a link is clicked, I want to highlight the element with a different color (yellow), then fade back to the element's original color. I know there is currentColor for an element's color, but there's nothing similar for background-color.
How can I smoothly transition from a highlight color back to the element's original background-color? Right now it fades from the highlight color to transparent, then jumps abruptly back to the original color when the animation ends.
:target td {
animation: highlight 1s;
}
#keyframes highlight {
from {
background-color: yellow;
}
to {
/* How do I set this back to the element's original background-color? */
background-color: transparent;
}
}
<ul>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
</ul>
<table>
<tr id="link1">
<td>This is Link #1</td><td>// Fine.</td>
</tr>
<tr id="link2">
<td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
</tr>
<tr id="link3">
<td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
</tr>
</table>

Just don't include a to for the animation. This works because if an end (or start) state is not defined, the browser will use the element's existing styles (RE: Valid Keyframe Lists on MDN)
div {
margin: 200px 0;
}
:target td {
animation: highlight 1s;
}
#keyframes highlight {
from {
background-color: yellow;
}
}
<ul>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
</ul>
<table>
<tr id="link1">
<td>This is Link #1</td><td>// Fine.</td>
</tr>
<tr id="link2">
<td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
</tr>
<tr id="link3">
<td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
</tr>
</table>

Another option is to use background-color: initial on 50% of the animation - see demo below:
div {
margin: 200px 0;
}
:target td {
animation: highlight 2s;
}
#keyframes highlight {
0% {
background-color: yellow;
}
50% {
background-color: initial;
}
}
<ul>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
</ul>
<table>
<tr id="link1">
<td>This is Link #1</td><td>// Fine.</td>
</tr>
<tr id="link2">
<td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
</tr>
<tr id="link3">
<td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
</tr>
</table>

if you just remove to from keyframes it will take the assigned background-color.
to understand it read this section of mdn doc
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes#Valid_keyframe_lists
div {
margin: 200px 0;
}
:target td {
animation: highlight 2s;
}
#keyframes highlight {
from {
background-color: yellow;
}
}
<ul>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
</ul>
<table>
<tr id="link1">
<td>This is Link #1</td><td>// Fine.</td>
</tr>
<tr id="link2">
<td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
</tr>
<tr id="link3">
<td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
</tr>
</table>

Related

How to add hover for ::before

Iam using kendo Calendar
this is the html
> <table> <tr> <td role="gridcell" class=""><a tabindex="-1"
> class="k-link" href="#" data-value="2015/11`enter code here`/1" title="Tuesday,
> December 01, 2015"><div class="exhibition">1</div></a></td> </tr>
> </table>
On hover "k-state-hover" class is adding to td
<td role="gridcell" class="k-state-hover"><a tabindex="-1"
class="k-link" href="#" data-value="2015/11/1" title="Tuesday,
December 01, 2015"><div class="exhibition">1</div></a></td>
I want to change the colour of "k-state-hover" for "exhibition" div
I tried like this:
.exhibition::before:hover{
background-color:"red";
}
but its not working
Use .exhibition:hover::before instead of .exhibition::before:hover
You can only apply :hover on a dom element, not a pseudo-element like :before. So anyway you can only write ".exhibition:hover::before"
But in your case if I understand well, you want to change the background color of the ::before of the .exhibition div when the class k-state-hover is applied, so you only need :
.k-state-hover .exhibition::before{
background-color:red;
}
`

How to hide and show clickable content using HTML & CSS?

I understand that other people have asked questions similar to this, and I've already looked through their answers from other users and still am having difficulty understanding what to do...
Currently on one of the pages on my website, all of the collapsible content is automatically shown and will hide when you click on it. I would like the opposite, where all of the collapsible content is by default hidden, and you would have to click on the collapsible content to view the nested content inside of it to be shown.
Here is my CSS:
body{
display: block;
}
li{
list-style-type: none;
text-align:left;
padding:3.5px;
position:relative;
}
.hhhh{
text-align:left;
}
h2{
text-align:center;
}
h7{
font-size:15px;
}
span{
text-align:left;
}
And here is my HTML:
<body>
<h2>Industries Served</h2>
<div id="ListContainer">
<ul id="expList">
<li>
<h7 style="font-family:14px">
<i class="fa fa-caret-right"></i> Aerospace & Aeronautics
</h7>
<ul>
<li>
<div>
<div>
<p class="alert"> ......... </p>
</div>
</div>
</li>
</ul>
</li>
<li>
<h7>
Agriculture & Food Science
</h7>
<ul>
<li>
<div>
<p> ......... </p>
</div>
</li>
</ul>
</li>
<li>
<h7>
Alternative Energy & Clean Technology
</h7>
<ul>
<li>
<div>
<p> ......... </p>
</div>
</li>
</ul>
</li>
</ul>
</div>
Here is my javascript:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h7').css('cursor','pointer');
$(".markdown-block .sqs-block-content h7").click(function(){
$(this).nextUntil("h7").slideToggle()
$(this).find('.fa-caret-right').toggleClass('fa-rotate-90');
});
});
Thank you!
You can use 'display' in CSS to show and hide content.
More information on how to use here: http://www.w3schools.com/css/css_display_visibility.asp
Example:
h1.hidden {
display: none;
}
You can do that by using a combination of css3 animation, opacity, transform and hover/click selectors.
Here is a codepen showing you a generic approach to doing this: http://codepen.io/abergin/pen/ihlDf where css3 keyframes is used. Here's one of the animation keyframes from the codepen:
#keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
}
}
Using the sibling and checked selectors, we can determine the styling of >sibling elements based on the checked state of the checkbox input element. One >use, as demonstrated here, is an entirely CSS and HTML accordion element. Media >queries are used to make the element responsive to different screen sizes.
Via - http://codepen.io/abergin/pen/ihlDf
You can use :focus technically.
Why not use jQuery though?

Apply element hover on an external class

I am trying to change a button's colour when I hover an external class. This is what I made but it doesn't work..
HTML:
<table class="hover_element">
Hover me!
</table>
<div class="first_div">
<div class="second_div">
<div class="third_div">
<button class="apply_hover">
Apply hover on this element
</button>
</div>
</div>
</div>
CSS:
.hover_element:hover ~ .first_div .second_div .third_div .apply_hover {
color: orange;
}
https://jsfiddle.net/umz8t/2754/
I changed my whole answer after your edit.
The problem here is that you should remove the :hover from .hover_element class:
.hover_element ~ .first_div .second_div .third_div .apply_hover:hover
Working jsfiddle: https://jsfiddle.net/umz8t/2758/
If you wanted that the hover event of the table highlighted the div under it, two things should be done:
1.to add <tr><td> to the table (the :hover event won't work otherwise):
<table class="hover_element">
<tr>
<td>Hover me!</td>
</tr>
</table>
2.to remove the :hover from .apply_hover:
.hover_element:hover ~ .first_div .second_div .third_div .apply_hover
Working jsfiddle: https://jsfiddle.net/umz8t/2759/
if you want to highlight both of them at the same time (on the :hover event of .hover_element), then this should be added:
.hover_element:hover, .hover_element:hover ~ .first_div .second_div .third_div .apply_hover
Working jsfiddle: https://jsfiddle.net/umz8t/2760/

Label component display issue

On the web page linked below I am trying to use labels to display a vertical list of items found under the heading 'What we specialise in!'. The default element is a span to display a label however multiple labels are stacking up on the same line which is not what I want to achieve visually, I actually desire each label to occupy an individual line instead. (Is this possibly to do with the display: inline-block; CSS rule?). Is there a change of markup or CSS property to assist with this?
http://openreachmarketing.co.uk/index.php
<span class="odd label label-info">Accident Compensation</span>
<span class="even label label-warning">PPI</span>
<span class="odd label label-important">Buildings and Contents Insurance</span>
<span class="even label label-info">Utility Switches</span>
<span class="odd label label-warning">Car Loans</span>
<span class="even label label-important">Solar Panels</span>
Here is the documentation for the bootstrap labels:
http://twitter.github.com/bootstrap/components.html#labels-badges
You have h4 for the heading!
<h4 class="heading">What we specialise in!</h4>
The What we specialise in! is behaving exactly as expected. But if you want that to be displayed like a label, then clear the styles for the H4 there and give this mark-up.
<h4><span class="label">What we specialise in!</span></h4>
Or
<h4><span class="odd label label-info">What we specialise in!</span></h4>
The other things like: Accident Compensation PPI Buildings and Contents Insurance Utility Switches Car Loans Solar Panels, etc are behaving right.
CSS for multi line display!
.span4.margbot20 .label {
float: left;
clear: both;
margin: 0 0 5px;
}
Screenshot
Just Markup Change
<p><span class="odd label label-info">Accident Compensation</span></p>
<p><span class="even label label-warning">PPI</span></p>
<p><span class="odd label label-important">Buildings and Contents Insurance</span></p>
<p><span class="even label label-info">Utility Switches</span></p>
<p><span class="odd label label-warning">Car Loans</span></p>
<p><span class="even label label-important">Solar Panels</span></p>

How to disable div or jstree inside div?

Can anyone tell me how to disable a div or elements inside a div?
I have a jstree in my div and I want to disable the div/jstree.
Thanks!
I made a simple example for you here
Basically, it creates a div over your jstree's one so that it is disabled from user interactions.
I guess you can make it visually better, but i think this gives you the idea.
I also checked that there is no strigth way to disable a jstree, even if it could be usefull.
Maybe you'd want to ask the dev in google group...
HTML Code:
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<div id="jstree-wrapper">
<div id="demo" style="height:100px;">
<ul>
<li id="node_1_id">
<a>Root node 1</a>
<ul>
<li id="child_node_1_id">
<a>Child node 1</a>
</li>
<li id="child_node_2_id">
<a>Child node 2</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a>Team A's Projects</a>
<ul>
<li><a>Iteration 1</a>
<ul>
<li><a>Story A</a></li>
<li><a>Story B</a></li>
<li><a>Story C</a></li>
</ul>
</li>
<li><a>Iteration 2</a>
<ul>
<li><a>Story D</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="disabler"></div>
</div>​
CSS code:
#jstree-wrapper {
position: relative;
}
#disabler {
position: absolute;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.5;
}​
JS Code:
$(document).ready(function() {
$("#demo").jstree();
$("#disable").on("click", function() {
$("#disabler").css("width", $("#demo").width());
$("#disabler").css("height", $("#demo").height());
});
$("#enable").on("click", function() {
$("#disabler").css("width", "0px");
$("#disabler").css("height", "0px");
});
});
Here's a very good example I didn't find done so simple and good anywhere else. In this example you can simulate the 'disabled' attribute only by adding CSS style as I entered in the code snippet. It disables by using the CSS "visible:hidden", and adds a translucent mask to cover the whole div area and disable anything inside it. You can choose to comment out the 'Visibility:hidden' to be able to see the elements behind the mask, but then they will be tabable, if you don't mind them hidden then uncomment that style.
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.2;
background-color: black;
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
</div>
<button>Dummy</button>
<br/>
<br/>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>

Resources