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.
Related
I am trying to nest these lines of code together, I have tried the following but it does not work, is there any other way to have both the button and a tag changed by hovering the button through a single piece of code ?
.about-right button:hover {
background: #91c8ff;
& .a {
color: #151515;
}
}
Here is the orginal code:
.about-right button:hover {
background: #91c8ff;
}
.about-right button:hover a {
color: #151515;
}
I want to customize the placeholders which comes inside the modal i.e , those comes under class styled-input.
I tried with the following CSS but it doesn't seems working.
.styled-input::-webkit-input-placeholder {
color: blue !important;
}
.styled-input:-moz-placeholder {
color: blue !important;
}
.styled-input::-moz-placeholder {
color: blue !important;
}
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.
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");
});
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}