Related
I've got a CSS :hover pseudo-class that is not producing any results.
I was messing around with some image gallery code, and I've managed to get this snippet that doesn't work. I can't figure out why. Some of the weirder CSS rules regarding size here are because these divs normally contain images. I removed the images for simplicity, but left the rules in.
Other :hover elements on the same page are working.
I'm not sure what else to say about the problem, since this is so basic. I'm probably missing something really obvious.
JSFiddle here -
http://jsfiddle.net/GbxCM/
In some cases (mostly with absolute positioning), you cannot apply a :hover pseudo-class to something with display: inline-block;. (If you have Chrome, use inspect element and add the :hover trait yourself--notice, it will work perfectly! The browser just doesn't register the :hover itself.)
So, I went ahead and replaced this with float: left;, added a margin (to simulate the inline-block look), and changed the br to a clear. The result is in this jsFiddle.
If I'm guessing correctly what you're trying to do, then you don't need to change the positioning or any of that. The only change I can see you wanting to make is changing the background color. Here's the fiddle I made to clarify that response.
Here's the code for readability's sake:
HTML
<div class="wrapper">
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<br>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
</div>
CSS
.wrapper {
height: 600px;
width: 600px;
overflow: hidden;
position: relative;
}
.squareswrapsolo {
height: 100px;
width: 100px;
display: inline-block;
overflow: hidden;
background: #ccc;
}
.squareswrapsolo:hover {
background: #000;
}
For me The problem was with my Chrome setting, I was testing my multi-platform web application with chrome in Mobile view for which the hover event is by-default disabled.
You can disable the Mobile mode by clicking the mobile icon in the top-left of Elements tabs as shown in image.
Moreover, to check if your :hover event is setting the desired css property or not you can force-trigger the hover event from chrome (by checking hover in styles> :hov> hover red marked in image) and check if the :hover CSS property is working or not. For me it was working fine so I was sure that the event is not triggering.
I fixed it with removing a z-index: -1 from a wrapper element
I have the following button with associated context menu
<div class="control-action">
<button>Action</button>
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
When the button is clicked the associated ul shows beneath it as a context menu.
This is working great on all browsers except IE 7. In IE7 the context menu (ul) shows beneath the button below it. I imagine this is likely due to how the stacking context is resolving these elements.
My css currently looks like this:
.control-action
{
position: relative;
text-align:right;
width:100px;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
Any ideas as to what I'm doing wrong?
IE up to IE7 uses the nearest positioned ancestor to determine the stacking context.
You seeing that in IE6 too?
Put your button after the ul and then try it.
I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.
<div class="control-action" style="float:right">
<div class="control-action-menu">
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
<button>Action</button>
</div>
With this markup change the css has changed into the following:
.control-action
{
text-align:right;
width:100px;
}
.control-action-menu
{
position:relative;
z-index:1;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
IE7 has known bugs with z-index.
Without seeing your full page, the best I can do is point you to some resources which explain the issue:
IE 6 & IE 7 Z-Index Problem
IE7 Z-Index Layering Issues
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The idea, in its most basic form, is to test adding/removing position: relative and z-index on parents of the problematic element until it's fixed.
Could be the hasLayout bug.
This may help: IE7 relative/absolute positioning bug with dynamically modified page content
I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn't work. Would I need to add something or perhaps this isn't the right way to do it? I appreciate any help :)
The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick...?
For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.
link to dabblet (not mine): http://dabblet.com/gist/1506530
link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/
This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...
.clicker {
width:100px;
height:100px;
background-color:blue;
outline:none;
cursor:pointer;
}
.hiddendiv{
display:none;
height:200px;
background-color:green;
}
.clicker:focus + .hiddendiv{
display:block;
}
<html>
<head>
</head>
<body>
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>
</body>
</html>
The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.
Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a> so it can be reachable through CSS:
http://jsfiddle.net/Jdrdh/2/
a .hidden {
visibility: hidden;
}
a:visited .hidden {
visibility: visible;
}
<div id="container">
<a href="#">
A
<div class="hidden">hidden content</div>
</a>
</div>
Fiddle to your heart's content
HTML
<div>
<a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
<div class="hiddendiv" id="testA">1</div>
<div class="hiddendiv" id="testB">2</div>
</div>
CSS
.hiddendiv {display: none; }
.testA:focus ~ #testA {display: block; }
.testB:focus ~ #testB {display: block; }
Benefits
You can put your menu links horizontally = one after the other in HTML code, and then you can put all the content one after another in the HTML code, after the menu.
In other words - other solutions offer an accordion approach where you click a link and the content appears immediately after the link. The next link then appears after that content.
With this approach you don't get the accordion effect. Rather, all links remain in a fixed position and clicking any link simply updates the displayed content. There is also no limitation on content height.
How it works
In your HTML, you first have a DIV. Everything else sits inside this DIV. This is important - it means every element in your solution (in this case, A for links, and DIV for content), is a sibling to every other element.
Secondly, the anchor tags (A) have a tabindex property. This makes them clickable and therefore they can get focus. We need that for the CSS to work. These could equally be DIVs but I like using A for links - and they'll be styled like my other anchors.
Third, each menu item has a unique class name. This is so that in the CSS we can identify each menu item individually.
Fourth, every content item is a DIV, and has the class="hiddendiv". However each each content item has a unique id.
In your CSS, we set all .hiddendiv elements to display:none; - that is, we hide them all.
Secondly, for each menu item we have a line of CSS. This means if you add more menu items (ie. and more hidden content), you will have to update your CSS, yes.
Third, the CSS is saying that when .testA gets focus (.testA:focus) then the corresponding DIV, identified by ID (#testA) should be displayed.
Last, when I just said "the corresponding DIV", the trick here is the tilde character (~) - this selector will select a sibling element, and it does not have to be the very next element, that matches the selector which, in this case, is the unique ID value (#testA).
It is this tilde that makes this solution different than others offered and this lets you simply update some "display panel" with different content, based on clicking one of those links, and you are not as constrained when it comes to where/how you organise your HTML. All you need, though, is to ensure your hidden DIVs are contained within the same parent element as your clickable links.
Season to taste.
In 2022 you can do this with just HTML by using the details element. A summary or label must be provided using the summary element. details is supported by all major browsers.
<details>
<summary>Click Here for more info</summary>
Here is the extra info you were looking for.
</details>
HTML
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
CSS
#content {
display: none;
}
input[type="text"]{
color: transparent;
text-shadow: 0 0 0 #000;
padding: 6px 12px;
width: 150px;
cursor: pointer;
}
input[type="text"]:focus{
outline: none;
}
input:focus + div#content {
display: block;
}
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
A little hack-ish but it works. Note that the label tag can be placed any where. The key parts are:
The css input:checked+div selects the div immediately next to/after the input
The label for said checkbox (or hey leave out the label and just have the checkbox)
display:none hides stuff
Code:
<head>
<style>
#sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
#content {height:100%; background:green; width:400px; clear:none; float:left;}
label {background:yellow;float:left;}
input{display:none;}
input:checked+#sidebar{display:none;}
</style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>
<div id="content">hello</div>
</div>
</body>
EDIT: Sorry could have read the question better.
One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.
You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a css method to override the above and slide and fade for transitions.
Tilda(~) mean some sibling after; not next sibling like plus(+).
[key="value"] is an attribute selector.
Radio buttons must have same name
To string tabs together one could use:
<html>
<head>
<style>
input[value="1"]:checked ~ div[id="1"]{
display:none;
}
input[value="2"]:checked ~ div[id="2"]{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="hider" value="1">
<input type="radio" name="hider" value="2">
<div id="1">div 1</div>
<div id="2">div 2</div>
</body>
</html>
You could do this with the CSS3 :target selector.
menu:hover block {
visibility: visible;
}
block:target {
visibility:hidden;
}
You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.
if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:
Hide Show content-list with only CSS, no javascript used
You can find <div> by id, look at it's style.display property and toggle it from none to block and vice versa.
function showDiv(Div) {
var x = document.getElementById(Div);
if(x.style.display=="none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />
With this method, when you click on Nav Dropdown elements it will NOT disappear, unlike plain :focus solution.
key is:
tabindex in parent element
parentDiv:focus-within hiddenDiv { display: block;}
it will work with both: display and visibility css;
HTML code:
<div className="DevNavBar dbb">
{/* MAKE SURE TO ADD TABINDEX TO PARENT ELEMENT, OTHERWISE FAILS */}
<div className="DevNavBar_Item1 drr" tabIndex="0">
item1
<div className="DevNavBar_Item1_HiddenMenu dgg">
<ul>
<li>blah1</li>
<li>blah2</li>
</ul>
</div>
</div>
</div>
CSS code:
.DevNavBar {
padding: 40px;
}
.DevNavBar_Item1 {
padding: 20px;
width: fit-content;
cursor: pointer;
position: relative;
}
.DevNavBar_Item1:hover {
color: red;
}
.DevNavBar_Item1_HiddenMenu {
display: none;
position: absolute;
padding: 10px;
background-color: white;
z-index: 10;
left: 0;
top: 70px;
}
.DevNavBar_Item1:focus {
color: red; // this is so that when Nav Item is opened, color stays red
}
.DevNavBar_Item1:focus-within .DevNavBar_Item1_HiddenMenu {
display: block;
color: black; // this is to remove Bubbling, otherwise it will be RED, like the hover effect
}
Here is Video Demo I created on my youtube channel (note: this is my youtube channel, so I am affiliated to that channel), the link is for 'show and tell' purposes: https://youtu.be/QMqcZjmghf4
CSS does not have an onlclick event handler. You have to use Javascript.
See more info here on CSS Pseudo-classes: http://www.w3schools.com/css/css_pseudo_classes.asp
a:link {color:#FF0000;} /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;} /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;} /* selected link - the user has clicked the link and the browser is loading the new page */
I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>
I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link.
I'm looking for something like <div> … </div>, but that is valid XHTML 1.1.
Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.
For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.
In essence it's this:
Build your panel using normal CSS techniques and valid HTML.
Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
Inside that link, put an empty span tag (<span></span>, not <span /> - thanks #Campey)
give the panel position:relative
apply the following CSS to the empty span:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
/* fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
It will now cover the panel, and as it's inside an <A> tag, it's a clickable link
give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link
You can't make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.
a {
display: block;
}
You can then set the width and height on it.
This is an ancient question, but I thought I'd answer it since everyone here has some crazy solutions. It's actually very very simple...
An anchor tag works like this -
EVERYTHING IN HERE TURNS INTO A LINK
Sooo...
<div id="thediv" />
Although I'm not sure if this is valid. If that's the reasoning behind spoken solutions, then I apologise...
Requires a little javascript.
But, your div would be clickable.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
This option doesn’t require an empty.gif as in the most upvoted answer:
HTML:
<div class="feature">
</div>
CSS:
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/
This is a "valid" solution to achieving what you want.
<style type="text/css">
.myspan {
display: block;
}
</style>
<span class="myspan">text</span>
But most-likely what you really want is to have an <a> tag displayed as a block level element.
I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).
It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link.
The cleanest way would be to use jQuery with the data-tags introduced in HTML. With this solution you can create a link on every tag you want. First define the tag (e.g. div) with a data-link tag:
<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
Now you can style the div however you want. And you have to create also the style for the "link"-alike behavior:
[data-link] {
cursor: pointer;
}
And at last put this jQuery call to the page:
$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});
With this code jQuery applys a click listener to every tag on the page which has a "data-link" attribute and redirects to the URL which is in the data-link attribute.
Not sure if this is valid but it worked for me.
The code :
<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
<p style='display:inline;color:#ffffff;float:left;'> Whatever </p>
<a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>
To make thepeer's answer work in IE 7 and forward, it needs a few tweaks.
IE will not honour z-index if the element is has no background-color, so the link will not overlap parts of the containig div that has content, only the blank parts. To fix this a background is added with opacity 0.
For some reason IE7 and various compatibility modes completely fail when using the span in a link approach. However if the link itself is given the style it works just fine.
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
<div style="position:relative">
<some content>
<a href="somepage" class="blockLink" />
<div>
you could also try by wrapping an anchor, then turning its height and width to be the same with its parent. This works for me perfectly.
<div id="css_ID">
</div>
An option that hasn't been mentioned is using flex. By applying flex: 1 to the a tag, it expands to fit the container.
div {
height: 100px;
width: 100px;
display: flex;
border: 1px solid;
}
a {
flex: 1;
}
<div>
Link
</div>
This worked for me:
HTML:
<div>
WHATEVER YOU WANT
<a href="YOUR LINK HERE">
<span class="span-link"></span>
</a>
</div>
CSS:
.span-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 9999;
}
This adds an invisible element (the span), which covers your entire div, and is above your whole div on the z-index, so when someone clicks on that div, the click is essentially intercepted by your invisible "span" layer, which is linked.
Note: If you're already using z-indexes for other elements, just make sure the value of this z-index is higher than anything you want it to rest "on top" of.
why not? use <div></div> works fine in HTML5
This example worked for me:
<div style="position: relative; width:191px; height:83px;">
</div>
This post is Old I know but I just had to fix the same issue because simply writing a normal link tag with the display set to block does not make the whole div clickable in IE. so to fix this issue far simpler than having to use JQuery.
Firstly let us understand why this happens: IE wont make an empty div clickable it only make the text/image within that div/a tag clickable.
Solution: Fill the div with a bakground image and hide it from the viewer.
How?
You ask good questions, now listen up.
add this backround style to the a tag
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
And there you have it the whole div is now clickable. This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left/right and then place a small image as well just for visual effects. so for me I used the left and right images as background images anyway!
Just have the link in the block and enhance it with jquery. It degrades 100% gracefully for anyone without javascript. Doing this with html isn't really the best solution imho.
For example:
<div id="div_link">
<h2>The Link and Headline</h2>
<p>Some more stuff and maybe another link.</p>
</div>
Then use jquery to make the block clickable (via web designer wall):
$(document).ready(function(){
$("#div_link").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
Then all you have to do is add cursor styles to the div
#div_link:hover {cursor: pointer;}
For bonus points only apply these styles if javascript is enabled by adding a 'js_enabled' class to the div, or the body, or whatever.
This is the best way to do it as used on the BBC website and the Guardian:
I found the technique here:
http://codepen.io/IschaGast/pen/Qjxpxo
heres the html
<div class="highlight block-link">
<h2>I am an example header</h2>
<p>This entire box links somewhere, thanks to faux block links. I am some example text with a custom link that sits within the block</p>
</div>
heres the CSS
/**
* Block Link
*
* A Faux block-level link. Used for when you need a block-level link with
* clickable areas within it as directly nesting a tags breaks things.
*/
.block-link {
position: relative;
}
.block-link a {
position: relative;
z-index: 1;
}
.block-link .block-link__overlay-link {
position: static;
&:before {
bottom: 0;
content: "";
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 0;
}
&:hover,
&:focus {
&:before {
background: rgba(255,255,0, .2);
}
}
}
<div> … </div>
Actually you need to include the JavaScript code at the moment,
check this tutorial to do so.
but there is a tricky way to achieve this using a CSS code
you must nest an anchor tag inside your div tag and you must apply this property to it,
display:block;
when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:
height:60px;
this is gonna make the whole area clickable,then you can apply text-indent:-9999px to anchor tag to achieve the goal.
this is really tricky and simple and it's just created using CSS code.
here is an example: http://jsfiddle.net/hbirjand/RG8wW/
This work for me:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
You can give a link to your div by following method:
<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
cursor:pointer;
width:200px;
height:200px;
background-color:#FF0000;
color:#fff;
text-align:center;
font:13px/17px Arial, Helvetica, sans-serif;
}
</style>
You can make surround the element with a href tags or you can use jquery and use
$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
This is the simplest way.
Say, this is the div block I want to make clickable:
<div class="inner_headL"></div>
So put a href as follows:
<a href="#">
<div class="inner_headL"></div>
</a>
Just consider the div block as a normal html element and enable the usual a href tag.
It works on FF at least.
I pulled in a variable because some values in my link will change depending on what record the user is coming from.
This worked for testing :
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
and this works too :
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
While I don't recommend doing this under any circumstance, here is some code that makes a DIV into a link (note: this example uses jQuery and certain markup is removed for simplicity):
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[href]").click(function () {
window.location = $(this).attr("href");
});
});
</script>
<div href="http://www.google.com">
My Div Link
</div>
If you can use bootstrap, one simple solution is to use bootstrap .stretched-link.
https://getbootstrap.com/docs/4.3/utilities/stretched-link/
Sample Code
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
Soviut's answer was not sufficient for me. I had to use
a { display: inline-flex; }
to remove baseline artifacts, when using just a img in the a.
Enclosing your div inside an anchor tag <a href></a> works like charm:
<a href="">
<div>anything goes here will turn into a link</div>
</a>
My smarty pants answer:
"Evasive answer to: "How to make block level element a hyperlink and validate in XHTML 1.1"
Just use HTML5 DOCTYPE DTD."
Didn't actually hold true for ie7
onclick="location.href='page.html';"
Works IE7-9, Chrome, Safari, Firefox,
if just everything could be this simple...
#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}
#logo a {padding-top:48px; display:block;}
<div id="logo"></div>
just think a little outside the box ;-)