I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
Related
this is my first question here, hope I am doing this right :)
I am trying to change the colours of the calendar on this page:
https://realsailing3.vanbruben.de/dehler-41-shelter.
But the classes are as long as
.monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox
or
ext_month_day_nox no_start nocuscol
or
.monthly-fluid .cur_month_day_nox.arrival_day
I have tried to separate them with a dot but i get the message "dont use adjoining classes"
Any idea of how I can change these colours?
Thank you very much!!
code picture
try to add !important with that property.
.monthly-fluid td.reserved_nox {
background-color: #f0c2c2 !important;
}
It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."
We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:
.monthly-fluid .cur_month_day_nox {
background-color: #c2dfd0;
}
This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.
Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.
I'm asking what may be a silly question, and I apologize in advance.
I am working on something without access to the back end. I have this annoying little "magic box" where I can use HTML / CSS.
My question is this: I have a class with a link and I'm trying to hide that specific one.
So in this case I'm trying to hide this .ad_link href="/colt?ban-link=141"
I don't want to hide the entire .ad_link class, Just the specific class with that href attached to it. There are more items under the ad_link class that need to stay unhidden.
I hope my question makes enough sense, please let me know if I need to clarify more.
bigesgunshop.com It's located under the left side, the "colt" image/link
Try this:
.ad_link[href="/colt?ban-link=141"] {
display: none !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
or if you can add another class to this link, just add hidden defined as:
.hidden {
display: none !important;
}
Agree to #pawel, but this approach is not very maintainable.
I suggest it's in this case better to hide with inline style:
Foo
Or use an class with more importance to hide the link.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.
I'm doing an image button rollover that has 3 stages (normal, hover, active).
I have the normal and hover stages working, however I can't seem to get the 'active' to work. That is, I want the image to stay on the active lever after it has been clicked.
Here is what I have:
http://jsfiddle.net/pufamuf/Q3YpU/1/
Thanks! :))
What you're trying to do will require JavaScript. Your CSS is fine, but when the link is no longer active, the :active selector no longer applies, and there's not much you can do about that.
You could (for example) use JavaScript to respond to the click event by adding an extra CSS class to the tag, and use that class to style the link identically to your :active link. For example, if your JS adds the class "clicked", your rule might look like
#emailUs:active, #emailUs.clicked
{
background-position: 0 -62px;
}
Many (most?) developers would probably use jQuery for something like this.
The :active pseudo-class only applies while the element is in the process of becoming activated. Once the mouse click is released the element no longer falls under the :active category.
In order to produce your expected behavior you will need to use some Javascript.
Use jQuery addClass on click event
If you could use JavaScript, this would be simple. Come up with some class name (e.g., active), and add it to your :active declaration:
#emailUs:active, .active
{
background-position: 0 -62px;
}
Then use JavaScript to listen for the click event on that link, prevent the default action, and add/remove the active class from the element as necessary.
However, if JavaScript isn't allowed, there's a much messier way to get what you want, which probably won't be feasible on a live site.
Change the link's href so that it points to itself:
<a id="emailUs" href="#emailUs" title="Email Us"></a>
Then use the :target selector in your CSS:
#emailUs:active, #emailUs:target
{
background-position: 0 -62px;
}
Keep in mind that the second solution has some caveats that go with it:
It tries to reposition the page so that the link is at the top of the screen
There could be a bunch of issues if you're already using the fragment identifier on your site
It won't work at all in IE6-8