This question already has answers here:
Insert a Link Using CSS
(6 answers)
Closed 9 years ago.
Can I add an <a href=""> link to an HTML element using CSS. As I have an image which I want to add a link to a particular page. Can any one help me in doing this?
No. Its not possible to add link through css. But you can use jquery
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
Here the demo: http://jsfiddle.net/r5uWX/1/
You cannot simply add a link using CSS. CSS is used for styling.
You can style your using CSS.
If you want to give a link dynamically to then I will advice you to use jQuery or Javascript.
You can accomplish that very easily using jQuery.
I have done a sample for you. You can refer that.
URL : http://jsfiddle.net/zyk9w/
$('#link').attr('href','http://www.google.com');
This single line will do the trick.
You don't need CSS for this.
<img src="abc"/>
now with link:
<img src="abc"/>
Or with jquery, later on, you can use the wrap property, see these questions answer:
how to add a link to an image using jquery?
Related
This question already has answers here:
Center a div in CSS [closed]
(10 answers)
Closed 4 years ago.
Hi everyone I'm a beginner in HTML, and I need to know how to center an URL inside my web page, for example :
Click Here to Open Google
I tried to use the tag, and the STYLE attribute but it doesn't work.
Can some one help me to make it please ?
You could try in your css file:
a {display:block;text-align:center}
Hope this helps, personally I would add a class name to your a link such as google-link, otherwise this a style will effect all future anchor links :)
So in html file:
Click here to open google
Then in css file:
.google-link {display:block;text-align:center}
In addition your href needs to include a = after it: href="www.google.com"
i think the reason is because your DOM only covers the width of your text link which is "Click Here to Open Google". so centering it with the "center" tag will not give what you want.
Please try this:
<div style='width:100%; text-align:center;'> Click Here to Open Google
Explanation is, you created a "div" element and gave it a 100% width, then specify that anything inside it will be center aligned.
This will solve your problem. Kindly check the codepen link for demo:
https://codepen.io/deepesh316/pen/jQWRYy
For more info about css display block, you can refer w3 schools link:
https://www.w3schools.com/cssref/pr_class_display.asp
You can simply try this solution.
In above, your href should look like below code and then you can use style which will center your link.
<a href:"http://www.google.com" style="text-align:center"> Click Here to Open Google <\a>
Or else you can try
<div text-align="center">your link code here( )......</div>
Title says it all.
I'm well aware on how to do it with css but is there a way to remove the underline without using CSS ? (we're restricted on using CSS for this project)
Need to do it with pure html (no css, javascript, etc.).
You could achieve this with jQuery, but all links will be affected by this method.
For example:
$(document).ready(function() {
$("a").css({"text-decoration": "none"});
});
If you only want to remove the text-decoration of certain links, I would use inline-styling.
Like this:
Your link
An inline style would be useful if you are limited to the CSS. Something like:
Link
Another method would be to dynamically load a style with jQuery:
<script>
$(document).ready(function(){
$('a').css('text-underline','none');
});
</script>
Ideally it would be better to do this in the CSS file but this can help.
Well, first, you never said you were dealing with text. If you were, a very round-about way of doing it would be making the text an image instead and then linking the actual image.
This question already has answers here:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
(16 answers)
Closed 7 years ago.
Is there a way to avoid scrolling page up on clicking a simple link such as the one given below:
Click Me
Try this one:
HTML
<div>Test</div>
Click me
CSS
div{
height: 1000px;
}
The div is only for demonstration.
jsfiddle
You can prevent the default action in a JavaScript event handler with Event.preventDefault() like this:
$('#link').click(function(e){
e.preventDefault();
});
(Assuming the link has the id link You said you use jQuery, so I used jQuery syntax here)
Demo
Try the following one:
Click Me
This question already has answers here:
CSS After Element to insert mailto link?
(5 answers)
Closed 8 years ago.
META: This document was marked as a duplicate, and I was suggested to create another post instead, which is what I did here: How to get hyperlinks inside a "pop-up" term reference on mouse-over, and seperate the HTML term from the "pop-up" reference content. I also, then, realized it was a good idea to formulate the goal of the application better.
As a reflection: I think it can be difficult, especially for unexperienced users, to choose a good trade-off between specificity on the 1 hand, and goal-orientation on the other. My apologies for any trouble. Many thanks for the help.
---
Is it possible to have a hyperlink inside the CSS-syntax {content:"..."}? How would one go about creating such a link?
As an example, here is a piece of code I created, to have a term decription on mouse-hover:
HTML
<br><term id="HPV">HPV</term>
CSS
term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted}
term:hover{text-decoration:none; color:#aaaaaa}
term#HPV:hover:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black}
term#HPV:hover:after{content:"Human papillomavirus."}
My wondering is about how to get "Human papillomavirus." hyperlinked?
"Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file." Copied from here
There is no solution for this with css. anything inside content will not be html markup, its only text. so you could probably add an html element on hover which links to another url. for example http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/
$(function(){
$('#HPV').hover(function(e){
$(this).append('click me');;
},function(){
});
});
This question already has answers here:
Apply CSS to popover in Bootstrap
(5 answers)
Closed 6 years ago.
I have a popover like this; when the user hovers on first image he sees second image on popover.
<img src="myimage.jpg" rel="mypop" data-content="<img src=" otherimage.jpg ">">
I use this in script tags
$("[rel=mypop]").popover({ placement:'right', html : true });
Everything is ok image is in the middle of page.
But if the user hovers to an image in upper or downer side of page, he can't see proper image.
To solve this issue I suppose I must use CSS.
<style type="text/css">
img[rel="mypop"] {
}
</style>
But I couldn't find what to write into CSS style to show user popover in proper place.
I want user to see popover without conflicting any parts of page.
I used Twitter Bootstrap popover for this.
But I found out that, using popover (for showing images) is not suitable.
So now I use Colorbox to show that kind of data.