I have a list elements in td.. for td i just kept hover . When I click on particular element i am changing the background color of that particular element. But when I hover again i could not able to see wheather that selected one is selected or not. Now I want to hover on selected and unselected but when I go on to selected one i should find that element as selected.and rest are not selected.
li:hover{
background-color: #fff;
color: #878787;
}
$('li').on('click','.e',function(){
if(!$(this).hasClass('activeList'))
{
$('.e').removeClass("es");
$(this).addClass("es");
var selectedEmpId = $(this).attr("eI");
}
});
This may help you
li:not(.es):hover {
background-color: #fff;
color: #878787;
}
.es {
background-color: red;
color: white;
}
// script
$('li').on('click', function() {
$('li').removeClass("es");
$(this).addClass("es");
var selectedEmpId = $(this).attr("eI");
});
Related
I've a website with 3 pages.
https://mywebsite.com/#
https://mywebsite.com/#features
https://mywebsite.com/#download
I want to change the some of the CSS based on which anchor I'm at.
Here's an example of what I'm trying to do, what I get and what I expect.
#header-outer #social-in-menu a i::before{
color: #000000;
}
This does change social button colors to black but on every anchor. I've tried to wrap it with a[href*="features"] so that it would only change in #features link but social icons remains white.
This is what I tried to achieve show social icons black only in #features anchor.
a[href*="features"] {
#header-outer #social-in-menu a i::before{
color: #000000;
}
}
This one has no effect. Changes nothing. First part of CSS however does change icons to black but on all anchors.
How can I achieve this?
What I try to have as the end result is:
a[href*="features"] {
#header-outer #social-in-menu a i::before{
color: #000000; /* could be a different colour */
}
}
a[href*="download"] {
#header-outer #social-in-menu a i::before{
color: #FFFFFF; /* could be a different colour */
}
}
You can do something like:
$(document).ready(function() {
$(document).on("click", "a", function(e) {
var id = $(this).attr("href").substring(1);
$(".parent").attr("id", id);
});
});
a {
color: black;
}
#features a {
color: red;
}
#download a {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
Home
Features
Download
</div>
What this does is basically update the id of the parent element that wraps your anchors. This solution doesn't use :target and involves the use of Javascript/Jquery.
So I have the following problem, I want to be able to select a row in a table, and when I do that row gets an active background color. So far no problems. However, if the user should specify the background color to be transparent or set the opacity in rgba()-string to 0 then I want to display the underlaying row-color.
Now if I use a mixing I could style my css in different ways. But how can I get the opacity from the rgba-string to determine whether the string should be transparent or not? Does regex work within a mixin?
I.e.: I would something like (I know, the regex part is js but somthing similar for css/mixin):
#mixin active-background-color($activeBackgroundColor){
#if ($activeBackgroundColor.replace(/^.*,(.+)\)/,'$1') == 0) {
background-color: none;
} #else {
background-color: $activeBackgroundColor
}
}
So the solution turned out to be the following (should anyone be interested):
#mixin active-background-color($color) {
$alphaVal: alpha($color);
#if ($alphaVal== 0){
background-color: inherit;
} #else {
background-color: $color;
}
}
Link to the solution I used: The Sass Way
Sounds like you should simply define the selection on the tr
and add the user picked color to the td:
tr { background-color: whitesmoke; } // default row color
tr:hover { background-color: #ccc; } // default row selected color
tr:hover td { background-color: tomato } // user defined selected color
// if the user selects a transparent selection color
// the default row selected color will show
table { width:100%; border-collapse: collapse;}
tr { cursor: pointer; }
td { font:1rem sans-serif; padding:.2rem; }
tr { background-color: whitesmoke; }
tr:hover { background-color: #ccc; }
tr:hover td { background-color: tomato }
tr:last-of-type:hover td { background-color: transparent }
<table>
<tr><td>One</td><td></td><td></td><td></td></tr>
<tr><td>Two</td><td></td><td></td><td></td></tr>
<tr><td>Three</td><td></td><td></td><td></td></tr>
</table>
I have code like:
#header button active:hover, #footer button active:hover {
color: purple;
}
Instead of having to list all the sub-classes/elements when only #header/#footer are different, is it possible to do something like:
(#header|#footer) button active:hover {
color: purple;
}
Yeah there's a matches pseudo class, but if you're hoping it will save you some typing it still needs vendor prefixes you'd have to duplicate and the support isn't great.
:matches(#header, #footer) button active:hover {
color: purple;
}
:-webkit-any(#header, #footer) button active:hover {
color: purple;
}
:-moz-any(#header, #footer) button active:hover {
color: purple;
}
So as you can see it ends up being more verbose than just adding the comma and another selector at the moment.
In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with css?
.v-textfield.textfield-default {
border: none;
border-bottom: 1px solid $non-active-field;
outline: none;
height: 3rem;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}
.v-textfield.textfield-default:focus {
border-bottom: 1px solid $default;
}
.v-caption-default-caption {
color: purple; //changes the text to purple
top: 0.8rem;
left: 0.75rem;
font-size: 1rem;
cursor: text;
transition: .2s ease-out;
}
.v-caption-default-caption:focus {
color: red; //is never called
}
.v-caption-default-caption:active {
color: blue; //is never called either
}
Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.
From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.
Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.
Step 1: The component
public class MyTextFieldsComponent extends VerticalLayout {
public MyTextFieldsComponent() {
// the text-fields
TextField myFirstField = new TextField("My first caption");
TextField mySecondField = new TextField("My second caption");
// when focused, add our custom style
FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");
// when blurred, remove the custom style
FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");
// use the above listeners
myFirstField.addFocusListener(focusListener);
mySecondField.addFocusListener(focusListener);
myFirstField.addBlurListener(blurListener);
mySecondField.addBlurListener(blurListener);
// add the text-fields to the UI
addComponent(myFirstField);
addComponent(mySecondField);
}
}
Step 2: The style
.v-caption-red-caption {
color: red;
}
Step 3: The result
So I am providing the resources for my celllist via the constructor. Everything seems to work, I have provided my own style sheet:
.cellListWidget {
color: #021650;
background-color: #021650;
}
.cellListEvenItem {
cursor: pointer;
zoom: 1;
background: red;
}
.cellListOddItem {
cursor: pointer;
zoom: 1;
background: blue;
}
.cellListKeyboardSelectedItem {
background: #ffc;
}
.cellListSelectedItem {
background-color: green;
color: white;
height: auto;
overflow: visible;
}
I must not understand it quite right because the background color I tried to set for the widget does not seem to take any effect. The rest of the styles work though, even item, odd item, selected item, etc.
Just to clarify, I want to change the color of the whole column this list is on, it items in the list are obviously styled, but the list takes up more vertical space than there are items, so where there are no items, is just a grey color which I want to change.
The solution I found was to not style the cell list, but the flowpanel that the cell list was on.