Apply new CSS rules when on click of <a> element - javascript

I'm currently trying to design and develop my own lightweight lightbox. The idea is when someone clicks <a href="#tab1"> it will change the properties of the <div id="tab1"> from display: none to display: block. Once the lightbox pops up it will have another link like <a href="#tab1_close"> to reverse the CSS properties back to display: none.
I've used input[name='name'] ~ #id for a lot of other sections on my site, I'm wondering if it's possible to change it so the input recognizes the <a> as the input and applies the CSS changes on the click.
Ideally, I could add id="tab_1" to the <a>, then the code would be something like a#tab_1:active ~ #tab1 { display: block } but that code doesn't seem to do anything.
Here's my Code Pen

If you want CSS only try the :target selector:
#tab1:target {
display: block;
}
http://codepen.io/anon/pen/okEqr

jQuery's toggleClass() will dow hat you want: https://api.jquery.com/toggleClass/

Related

How to use the pseudo selectors in Inline Css in material UI? [duplicate]

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.
How can I use a:hover in inline CSS inside the HTML style attribute?
E.g., you can't reliably use CSS classes in HTML emails.
Short answer: you can't.
Long answer: you shouldn't.
Give it a class name or an id and use stylesheets to apply the style.
:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).
Response to the OP's comments:
See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.
Also, don't forget, you can add links to external stylesheets if that's an option. For example,
<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>
Caution: the above assumes there is a head section.
You can get the same effect by changing your styles with JavaScript in the onMouseOver and onMouseOut parameters, although it's extremely inefficient if you need to change more than one element:
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>
Also, I can't remember for sure if this works in this context. You may have to switch it with document.getElementById('idForLink').
You could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't
.
You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:
selector {rules}
Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go almost anywhere:
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
If you actually require inline code, this is possible to do. I needed it for some hover buttons, and the method is this:
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}
<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</a
In this case, the inline code: "background-color: red;" is the switch colour on hover. Use the colour you need and then this solution works. I realise this may not be the perfect solution in terms of compatibility, however this works if it is absolutely needed.
While it appears to be impossible to define a hover-rule inline, you can define the value of styles inline using a CSS variable:
:hover {
color: var(--hover-color);
}
<a style="--hover-color: green">
Library
</a>
Consider using an attribute or a class in addition to the selector (e.g., [hover-color]:hover) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).
Using JavaScript:
a) Adding inline style
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
b) or a bit harder method - adding "mouseover"
document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };
Note: multi-word styles (i.e.font-size) in JavaScript are written together:
element.style.fontSize="12px"
This is the best code example:
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">
Library
</a>
Moderator Suggestion: Keep your separation of concerns.
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>
JS
const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
this.style.color='#0F0'
}
libLink.onmouseout = function () {
this.style.color='#00F'
}
Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).
For now, your best bet is probably to just define a style block directly above the link you want to style:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
Foo!
As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:
style="cursor: pointer;"
<style>a:hover { }</style>
Go Home
Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.
You can do this. But not in inline styles. You can use onmouseover and onmouseout events:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>
According to your comments, you're sending a JavaScript file anyway. Do the rollover in JavaScript. jQuery's $.hover() method makes it easy, as does every other JavaScript wrapper. It's not too hard in straight JavaScript either.
There is no way to do this. Your options are to use a JavaScript or a CSS block.
Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block. But then the code will not be standard-compliant.
You can write code in various type.
First I can write this
HTML
<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>
CSS
.one {
text-decoration: none;
}
You can try another way:
HTML
Hello siraj
CSS
.one {
text-decoration: none;
}
.one:hover {
color: blue;
}
.one:active {
color: red;
}
You can also try hover in jQuery:
JavaScript
$(document).ready(function() {
$("p").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "pink");
});
});
HTML
<p>Hover the mouse pointer over this paragraph.</p>
In this code you have three functions in jQuery. First you ready a function which is the basic of a function of jQuery. Then secondly, you have a hover function in this function. When you hover a pointer to the text, the color will be changed and then next when you release the pointer to the text, it will be the different color, and this is the third function.
I just figured out a different solution.
My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.
Solution: I gave the footer links two different classes, and my problem was solved. I was able to have the onHover color change in one class, have the slides onHover have no color change/underline, and still able to have the external HREFS in the footer and the slides at the same time!
It's not exactly inline CSS, but it is inline.
<a href="abc.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Text</a>
I agree with shadow. You could use the onmouseover and onmouseout event to change the CSS via JavaScript.
And don't say people need to have JavaScript activated. It's only a style issue, so it doesn't matter if there are some visitors without JavaScript ;)
Although most of Web 2.0 works with JavaScript. See Facebook for example (lots of JavaScript) or Myspace.
So this isn't quite what the user was looking for, but I found this question searching for an answer and came up with something sort of related. I had a bunch of repeating elements that needed a new color/hover for a tab within them. I use handlebars, which is key to my solution, but other templateing languages may also work.
I defined some colors and passed them into the handlebars template for each element. At the top of the template I defined a style tag, and put in my custom class and hover color.
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
Then I used the style in the template:
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
You may not need the !important
While the "you shouldn't" context may apply there may be cases were you still want to achieve this. My use case was to dynamic set a hover color depending on some data value to achieve that with only CSS you can benefit from specificity.
Approach CSS only
CSS
/* Set your parent color for the inherit property */
.sidebar {
color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
color: inherit
}
.list-item a:hover {
color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
color: inherit !important;
}
Then your markup will be somewhat like:
Markup
<nav class="sidebar">
<ul>
<li class="list-item">
<a
href="/foo"
class="dynamic-hover-color"
style="color: #{{category.color}};"
>
Category
</a>
</li>
</ul>
</nav>
I'm doing this example using handlebars but the idea is that you take whatever is convenient for your use case to set the inline style (even if it is writing manually the color on hover you want)
You can just use an inline stylesheet statement like this:
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>
You can use the pseudo-class a:hover in external style sheets only. Therefore I recommend using an external style sheet. The code is:
a:hover {color:#FF00FF;} /* Mouse-over link */
You can do id by adding a class, but never inline.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
It is two lines, but you can reuse the class everywhere.
My problem was that I'm building a website which uses a lot of image-icons that have to be swapped by a different image on hover (e.g. blue-ish images turn red-ish on hover).
I produced the following solution for this:
.container div {
width: 100px;
height: 100px;
background-size: 100px 100px;
}
.container:hover .withoutHover {
display: none;
}
.container .withHover {
display: none;
}
.container:hover .withHover {
display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>
I introduced a container containing the pair of images. The first is visible and the other is hidden (display:none). When hovering the container, the first becomes hidden (display:none) and the second shows up again (display:block).

How to override inline CSS that is already marked !important from external HTML

I am using HTML to input a cloud-based instagram feed on a website. I want to hide the bottom half of the feed that references the website of the publisher. The inline HTML that is outputting already has display: inline-block !important marked, so trying to hide it with display: none !important or visibility: hidden !important do not work. I am able to hide the entire block with CSS but not "parts" of it. I don't seem to be able to edit the HTML since it is coming from the cloud. The only HTML that I actually use on the site in order to make it render does not include any of the inline CSS, as it is only two lines.
Would someone mind explaining how this kind of thing works and why I am encountering issues overriding the inline CSS?
I have tried using:
display: inline !important, display: none !important and visibility: hidden !important
None of these are receiving priority, as the element.style in the chrome developer console clearly shows the inline CSS already marked as !important that I do not have access to, nor can I edit.
I simply want to hide one selector within the HTML. It is marked as "a"
a {
}
I have tried using this selector within the actual element, but it does not receive priority either. Nothing is working.
Try to remove the inline style with jQuery
$("#myDiv2").css("transform","");//used rotate to see the effect
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="myDiv1" style="width:100px !important; height:100px !important;transform:rotate(30deg) !important">
//Some Content
</div>
<div id="myDiv2" style="width:100px !important; height:100px !important; transform:rotate(30deg) !important">
//Some Content
</div>
Setting the value of a style property to an empty string removes that property from an element.
$("#myDiv2").css("transform","");
Typically the only way to do this is to be more specific in your selector, for example selecting a[href][style] is more specific than just a. But since this is inline styles and already using !important you unfortunately might be out of luck!
a[href][style]{
color: green !important;
}
This link uses !important
<br/>
This link does not
If you wanted to just remove the links without importing several thousand lines of jQuery code, you can select and remove all <a> tags with just a few lines of plain JS.
document.querySelectorAll('a').forEach(link => {
link.remove();
});
<p> here is some text
This link uses !important
<br/>
This link does not
and some more text
</p>

How to override an inline style that is apparently set by javascript?

There is an image on this page http://www.robertsroofing.com/services-view/leak-repair/ specifically the orange water droplet icon above the photo. I want to hide this (display: none) but can't seem to target via css. So i also tried to add some javascript at the bottom of the page but that doesn't work either. Maybe it's not targeting right but I feel I tried everything.
<article id="post-1975" class="post__holder post-1975 services type-services status-publish has-post-thumbnail hentry">
<figure class="featured-thumbnail thumbnail large"><img src="http://www.robertsroofing.com/wp-content/uploads/2014/11/icon-leak-tile.png" alt="Reliable Commercial Roof Leak Repair" style="display: inline;"></figure>
</article>
<script>
$(document).ready(function(){
$('.type-services .thumbnail img').attr('style','display: none');
})
</script>
I do need to specifically target the parent .type-services class as this template is shared with other content. I just need the image hidden when the .type-services class is used.
The element has an inline style of display: inline;. This is why your CSS override is not working. Inline styles always take precedence over CSS rules, regardless of how specific your selector is.
There are 2 ways you can fix this. 1 is in your CSS, just add !important to force override of the style:
article.type-services figure.thumbnail > img { display: none !important; }
or, if you want to stick with the jquery method, fix your selector to target the correct class - you have a typo in 'thumbnail'. Also, you should use the 'css' function, rather than completely overriding the 'style' attribute.
$('.type-services .thumbnail img').css('display', 'none');
or just use the hide method
$('.type-services .thumbnail img').hide();

Change the state of a property from CSS class that has a attribute selector using Javascript

I have this HTML line:
<div id="content" class="slide" data-position="left" ></div>
and this CSS class with this [attribute] selector:
.slide[data-position="left"] {
display: none;
}
What I'm trying to do is after I click a button the css class will change like this using Javascript
.slide[data-position="left"] {
display: block;
}
I tried different methods like adding a new class in the HTML line or adding a inline style="display: block;" using Javascript:
$(".slide").attr('data-position', 'left').css({'display':'block'});
that generates
<div id="content" class="slide" data-position="left" style="display: block;"></div>
but the .css() method doesn't help me at all because I want to change/override .slide[data-position="left"]. The inline doesn't change anything in the CSS stylesheet.
I want to know how to change the state of a property for a specific css class that has a certain [attribute] selector.
I tried to google this issue but it seems that nobody has an answer for this.
Any ideas?
Thanks!
Instead of altering the CSS rule directly, you can give the element another class corresponding to another rule:
.slide.active { display: block; }
or, if the attribute has importance still:
.slide.active[data-position="left"] { display: block; }
That rule should go after the existing rule to ensure that a "slide" element that also has the "active" class will be visible.
You'd add the class in JavaScript with
$("#content").addClass("active");
You can achieve this by changing your jQuery selector. At the moment you're using jQuerys attr method to target the data-position attribute and set its value to left. Instead you need to use the same attribute selector you previously used in your CSS declaration: .slide[data-position=left]
What you need to do is change this:
$(".slide").attr('data-position', 'left').css({'display':'block'});
to this:
$(".slide[data-position=left]").css({'display':'block'});
The complete jQuery would look like this:
$("#clickMe").on("click",function(){
$(".slide[data-position=left]").css({'display':'block'});
});
Demo

Div breaks jQuery accordion

I have a jQuery accordion that breaks when I need to place a div-tag in one of the sliding open areas.. How do I get around this? I need to put a div-tag since I cannot make a nice box out of a span-tag. Anyone knows a way around this??
Please see my demo here to see where it breaks :(
http://jsfiddle.net/zRqYM/
You should probably change this:
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
to:
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
and the CSS:
.accordion2 > div {
background: #f7f7f7;
/* etc... */
It makes more sense to use a DIV instead of P if you want to put other elements inside the expandable content: http://jsfiddle.net/zRqYM/13/
Or just use inline elements inside the P tag and style them to display:block;, but it doesn’t make semantic sense to me.
This seems a bit lame, but you can use a span and just set it to display: block. Then it's essentially a div: http://jsfiddle.net/zRqYM/5/
Why cant you put it in a span and style the span as a nice box with display block?
You can use a span-tag. All you need to do is add the following styling for your span-tag class in the css
.whatever {
border: 1px solid #000;
display: inline-block;
margin: 0 5px;
}
There is a different way to try your accordion without messing around with CSS
Get your HTML done as follows;
<div id='accordion'>
<h3>Title of the view</h3>
<div>
all the stuff you want to do here
</div>
<h3>Title of the view</h3>
<div>
all the stuff you want to do here
</div>
</div>
and make your script file as
$('#accordion').accordion({ active: 0 });
For more info: visit http://jqueryui.com/demos/accordion
I've updated your jsfiddle: http://jsfiddle.net/zRqYM/21/ and changed your p tags to div tags since it allows the most tag nesting.
As a general rule, a div tag cannot be inside of a p tag since it will cause the p tag to close itself.

Categories