Following the docs, I've added an anchor around the paper-item, however a few things slightly complicate the issue.
Firstly, the anchor overrights the color and adds an underline. No biggie, can style that.
Secondly, when used with paper-menu, the iron-selected class which bolds the selected item binds to the anchor and not paper-item.
<a name="view1" href="/view1" class="iron-selected">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
Home
</paper-icon-item>
</a>
Doing something with css seems pretty backwards?
.nav-core__link {
color: var(--primary-text-color);
text-decoration: none;
}
.nav-core__link.iron-selected paper-icon-item {
font-weight:bold;
}
Is there another method available?
Related
I was wondering as to how you could style <a> tags without affecting <button> tags.
a:hover{
text-decoration: underline;
}
<link rel="stylesheet" href="http://mrredblob.com/wordpress/wp-content/themes/homework/style.css">
<button>A link</button>
If you need to use a button like display for an anchor - such that clicking on it should redirect to another page, you could use something like this:
<button onclick="location.href='https://www.google.com'">A link</button>
The onclick event will execute when the user clicks the button, and redirects the user to appropriate page.
You can see it working by pasting the following in a new tab in your browser:
data:text/html;charset=utf-8,<button onclick="location.href='https://www.google.com'">A link</button>
It won't work in the snippets/JS Fiddle due to ~sandbox constraints on snippet's iframe.
Is this what you're looking for?
HTML
<a href="#">
<button>
<span>A link</span>
</button>
</a>`
CSS
span:hover{
text-decoration: underline;
}
The anchor tag's content in your example is a button, and you're trying to set the text decoration of a button, which is not text. The button contains text, but that text is a child of the button, and the button is a child of the anchor. Therefore, the anchor does not have a text value to apply that css property.
Here is an example of what I'm talking about:
HTML
Here is<button>A link</button>Some text
CSS
a:hover{
text-decoration: none;
}
Additionally, you can apply a wrapper class to your anchor to style the child elements:
.wrapper:hover * {
text-decoration: underline;
}
Codepen:
https://codepen.io/foozie3moons/pen/gGRBxZ
Try simply doing this :
<button>A link</button>
This way you can style the text inside of the button however you want.
I found a way of doing it! Here's how:
a:not(button) {
text-decoration: underline
}
So I'm in the making of doing a border button that is active when you are on that page. But when you press on the second border button, the first ones border removes and the second one is visible. It's basically the same thing as the ones on this site. The "Questions, Jobs, Documentation Beta, Tags" buttons. One lights up as you are on that page and the other turns off. I tried looking it up on google but couldn't find. And I tried looking at the code by "inspecting element" through Google Chrome.
Make sure you have the exact same HTML on each page. Then in each page, style the corresponding button differently by assigning an 'active' class only to that button. For example:
On the Home page
<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>
On the About page
<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>
CSS
.button {
background-color: grey;
}
.active {
background-color: orange;
}
The simplest way I could think off is by adding an "active" Class to the button you want to light up on that page.
Requires a little bit of CSS and HTML. If you want the result element to be "activatable" without changing the page, you'll need some JS, as well.
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
});
button.active {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="active">Active Page</button>
<button>Not Active Page</button>
Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
code:
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }
CSS
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>
Javascript / jQuery
As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
button.selected{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
You should be able to add this code:
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
Then, you should be able to style your class to what ever you need.
The first example didn't work. I need to have always a list to disable links? Or what is wrong with my first demo?
<a class="disabled" href="#">Disabled link</a>
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled">Disabled link</li>
...
</ul>
https://jsfiddle.net/7y0u2amy/
I think you need the btn class.
It would be like this:
<a class="btn disabled" href="#">Disabled link</a>
It seems that Bootstrap doesn't support disabled links. Instead of trying to add a Bootstrap class, you could add a class by your own and add some styling to it, just like this:
a.disabled {
/* Make the disabled links grayish*/
color: gray;
/* And disable the pointer events */
pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
Link to disable<br/>
Non-disabled Link
I just created my own version using CSS. As I need to disabled, then when document is ready use jQuery to make active. So that way a user cannot click on a button until after the document is ready. So i can substitute with AJAX instead. The way I came up with, was to add a class to the anchor tag itself and remove the class when document is ready. Could re-purpose this for your needs.
CSS:
a.disabled{
pointer-events: none;
cursor: default;
}
HTML:
<a class="btn btn-info disabled">Link Text</a>
JS:
$(function(){
$('a.disabled').on('click',function(event){
event.preventDefault();
}).removeClass('disabled');
});
If what you're trying to do is disable an a link, there is no option to do this. I think you can find an answer that will work for you in this question here.
One option here is to use
123n
Disabled href tag
You cant set links to "disabled" just system elements like input, textfield etc.
But you can disable links with jQuery/JavaScript
$('.disabled').click(function(e){
e.preventDefault();
});
Just wrap the above code in whatever event you want to disable the links.
I just removed 'href' attribute from that anchor tag which I want to disable
$('#idOfAnchorTag').removeAttr('href');
$('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled');
Thanks for #jacob-van-lingen's comment, You can extend .btn-link in your global style
a.disabled{
#extend .btn-link
}
I developed the following solution because when I apply class styles such as btn disabled offered by Bootstrap 5 to an <a> element inside a card, margin and padding are applied to the element:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
Disabled Link
I liked the answer by Sercan and I added a tiny jQuery to it, so that the links are also not followed on click:
$(document)
.on("click",
"a.disabled",
function () {
return false;
});
and for the look from the Answer above:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
a:hover {
color: #237ca8 !important;
font-weight: bold;
}
a:active {
color: #cccccc !important;
font-weight: bold;
}
Above is my css and HTMl is
<div class="services">
<h2>Request a Quote</h2>
<ul class="contact">
<li>
<a href="forms/request-quote2.php">
Warehousing & Inventory Management
</a>
</li>
<li>
<a href="forms/request-quote3.php">
Last Mile Transportation
</a>
</li>
</ul>
</div>
Hover link is working fine but I tried so many times in different ways but this code is not working at all.
I want that if i click on third link then third link will be in different color other then which are not active means different color for current link is open.
You have same style for hover and active. So you cannot distinguish whether the active is working or not unless you do it the way mentioned in the comment by Quentin. If you change the color or any style for hover or active, you'll see that it's working fine.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/87/
a:hover{ color:#237ca8 !important; font-weight:bold;}
a:active{color:red !important; font-weight:bold;}
To check specific mouse event (:hover, :active, :focus), use "developer tool" in chrome: See :hover state in Chrome Developer Tools, so you can see if the rules applied or not
I checked the code you've pasted and it actually does work in JSFiddle.
It might be overwritten in a later stage at your CSS file by the !important tag.
JSFiddle demo