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.
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I'm using userstyles (stylish). I want to hide a promo on Google (aria-label="promo"). The promo asks me to make Google my homepage. display:none regarding the class in question also blocks the app-launcher so that's not an option. I see this:
<div aria-hidden="false" class="gb_ga gb_g">
In CSS I want to set "aira-hidden" to "true" regarding that class. Can I do that? Or is there another way to display:none for the part in question?
I'm extremely unfamiliar with aria-labels.
Firefox inspect element of Google aria label "promo" aria-hidden="false"
add this to your CSS to hide elements with aria-hidden="true"
[aria-hidden='true'] {
display: none;
}
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'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I want to create an element using DIV and CSS like below:
Create By: <avatar image 16x16> Prashant
Can anyone tell me what will be the CSS and DIV code for above type of layout. I don't want to use tables for this, DIV and CSS only.
In Digg listing the same kind of display can be found. I tried but not able to make the "username" central align in respect of the avatar image.
<div>Created by: <img src="/images/avatars/prashant.png" alt="" /> Prashant</div>
and
img {
vertical-align: middle;
}
should do the job.
vertical-align unfortunately is not handled very consistently by some of the older browsers (pre-2005, but then yet again IE6 is still around), but David's answer is correct from the standards view.