I need to change this A tag from
<a href="contact.html" >Contact</a>
to
<a href="tel:+13174562564" >Contact</a>
with only Css if it's possible or like this
<a href="tel:+13174562564" >+13174562564</a>
i have a lot of pages and i don't want to edit all of them it will take a life time that's why i need to do it in CSS and i have no JS linked to them
CSS is display only, you cannot modify the document object model with it. Sorry, this cannot be done. I wish I had a better answer, but 'it cannot be done' is the only answer.
CSS is for presentation and cannot be used to modify the HTML markup in the way you intend.
You need JavaScript for this.
It should be a fairly short script.
one solution is to hide a tag and put another
<div id="tag1">
link1
link2
</div>
css :
a[href="#tag1"] {
display:block;
}
a[href="#tag2"] {
display:none;
}
#tag1:target a[href="#tag1"]{
display:none;
}
#tag1:target a[href="#tag2"]{
display:block;
}
I use this method for responsive "buttons" of my menu bar
Related
first have to say that I have no idea of CSS. I am googling around and trying to customize my Squarespace webpage, reading comments, testing... Now I'm trying to make my blog more print-friendly. I inspected the entire page, looked for id's, classes, etc and then used
<style media="print" type="text/css"> /*Hide elements you don't want to print*/
#header, #footer, #preFooter, #rightSidebar, #sidecarNav, #contentinfo, #yui3-css-stamp, #_atssh, #service-icons-0, #rw_lso_flash, #at4-thankyou, .meta-above-title, .meta-below-title, .p-comment, .sqs-block-markdown, .rw-ui-squarespace-container, .entry-footer, .pagination
{display:none;} </style>
to remove whatever I don't want to be printed. However, there is one element which I don't know how to add to the list. It is basically the url address of my post title. I tried $(".entry-title.p-name").attr("href") but it didn't work. This is the code of one arbitrary post title on my blog:
<h1 data-content-field="title" class="entry-title p-name">
<a href="/updates/2016/4/7/fathers-sons-and-fishes" class="u-url" rel="bookmark">
Fathers, Sons and Fishes</a></h1>
I hope you can help me with this one.
Sincerely, Artur
.entry-title.p-name > a { display: none; }
Should work.
It sets any anchor inside a div with class="entry-title p-name" to non-visible. The > item indicates "child of". So, it translates to .entry-title.p-name 'children' a
Barring this, you can add a class to these specific anchors to hide that class.
What you have posted you tried ($(".entry-title.p-name").attr("href")) is a javascript or jquery selector. It is not CSS. You don't need javascript/jquery for this. If can be done with CSS.
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
I am curious as the best (only?) way to go about this.
I was asked to make a text link, display an image (under it) upon rollover and of course disappear when you rolloff the link.
(the original personal used some in-line style that broke the page, instead of declaring a block).. they also tried to use an IMAGE MAP to make the displayed image a LINK/clickable, and have a different/unique URL that the TEXT link used to display the image.
I made the style:
/*custom client requested CSS styling/functionality*/
a.imageDisplay img {
display:none;
}
a.imageDisplay:hover img {
display:block;
}
Here is a snippet of the HTML I am try to add this functionality to:
<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br />
My question is: what is the best way (better way) to add a LINK/URL to the image that is being displayed?
Because the image is INSIDE the anchor/link tag.. is will also be/get the same URL as the target when clicked....yes?
Anybody have some SIMPLE ideas as a work around?
(I really hate those MAP tags anyways) :)
thanks!
Is this simple?
<span class="txt-img">
<a class="txt" href="#1">Client Name ABC</a>
<a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a>
</span>
.txt-img {position:relative;}
.txt-img .img {position:absolute; display:none; left:0;}
.txt-img:hover .img {display:block;}
FIDDLE: http://jsfiddle.net/46Tf6/
I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?
You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>
You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.
You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});
I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.
With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!
This question already has answers here:
How to disable a link using only CSS
(25 answers)
Closed 8 years ago.
I have code here that i want to make the a href unclickable through CSS:
<div id="header"
style="background: url(/uploads/header/derivativesheader.gif)"
class="header-link">
<h1 id="logo" class="notext">
Title
</h1>
</div>
I cannot remove the hard coded href tag, but want to know if I can overwrite it's action using a CSS hack.
You can prohibit the click event with the pointer-events property: http://jsfiddle.net/NnEXn/
Remove no. Hide yes.
#logo a {
display: none;
}
However, this is probably not the desired result as it will also hide the inner content of the anchor (i.e. Title). As such, a JavaScript solution may be better suited. But to answer the question, this is a way using only CSS.
<a href="/" class="hide">
.hide {
visibility: hidden;
}
This will prevent the clickable action
I don't think this is possible (pure CSS). The only way I know of to make a link not clickable is to position another element over the link (zindex, still pure CSS), and be transparent so that the higher element is clicked and not the link.
Perhaps you cannot do this (as you said you cannot remove the hard-coded tag), but if you can add elements to the DOM, I would simply add a duplicate link with no href and set the other to 'display:none'. This will preserve the flow of the page, and the visual rendering of the link.