When displaying a div on hover, how can you target a specific div?
I need to display a hidden div from a link is on top of the page, and I can't figure out how.
When i tested, if the link and the div are one after the other, it displays corectly. but if i add another link before the first one, it does not work anymore.
From my testing using this CSS:
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
And this HTML:
<div class="expand">expand</div> <!--this does not do anithing-->
<div class="expand">expand</div> <!--this works-->
<div class="expandable">expandable</div>
Try the below one
.expandable{
display: none;
}
.expand:hover ~.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
Only the hover on the second div works because of the behaviour of the '+' selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
What W3C says :
Select and style every p element that are placed immediately after div elements:
div + p {
background-color: yellow;
}
you can hide div by id using : jQuery :
<div id=“div”>
</div>
<script>
$(“#div”).hide("slow"); // you can change "hide" to "show"
</script>
I am using the ui-bootstrap popover to list some notifications in my application.
I am using the uib-popover-template to design the content of the popover.
I would like to change the padding settings for each elements inside the popover.
I have tried using the popover-class attribute, but this just configures the CSS for the overall popover, and not the elements contained inside - this is what the .popover-content CSS class seems to govern.
Here is the html for the popover:
<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
popover-class="my-notifications-popover"></span>
Additionally, I don't want to do this just by doing:
.popover-content {
margin: 0px;
}
as I have used popovers in multiple places throughout my application and don't want them all to get their CSS redefined.
Can anyone tell me how to change this in the correct manner? All help much appreciated...
EDIT 1: I've tried to do as suggested in the comments by makshh and use CSS selectors to modify the '.popover-content' class. This class is a div contained within the parent '.popover' class.
I tried to do this with the following:
.my-notifications-popover {
margin-left: 0px;
}
.my-notifications-popover div {
margin-left: 0px;
}
This should make the margin-left zero for all child divs of .my-notifications-popover which should be applied to the popover. However it doesn't seem to be applied at all. This approach may not be ideal since it would set the margin for all divs below the popover which I may not want. Is there a way to specifically target the .popover-content class specifically using the CSS selectors?
I've created a plnkr to show exactly how this is not working.... You can see it here: https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso
Added
.popover-no-margin .popover-content {
padding: 0px;
}
https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview
which works because you passed the custom class
popover-class="popover-no-margin"
Well it seems like it was padding and not margin that needed to be changed! What a moron... oh well... sorry about that... still not sure what is the most accurate way to target just the popover-content div
Add this to your plunker example.. .popover-no-margin .popover-content{
padding:0px;
} and check if this is what you wanted.
This removes the extra spaces in the popover and it will be applies to this popover only as you have already defined the class popover-no-margin for this element.
Just check my code css is reflecting for popover content. You can handle css for popover by adding css to popover-content .popover-line or creating a custom css for popover as popover-class="my-popover-class":
HTML
<button popover-class="my-popover-class" popover-placement="right" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button> <script type="text/ng-template" id="myPopoverTemplate.html">
<div class="popover-line"> item 1 : This an example of angular ui-bootstrap popover custom content css</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div> </script>
CSS
.popover-content .popover-line { margin: 10px 0px; }
.my-popover-class { color: blue; padding-left: 0 !important;}
Working demo is here
You can add your css accordingly as you want within .popover-content .popover-line (like color,margin,padding and so on)
I checked your code. You miss something. Dynamically created content can't load existing CSS or Js. You should load css and js when you click the button. Just follow this way. I hope it will work with it well.
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover-line"> item 1</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div>
<style>
.popover-content{
display: block;
width: 200px;
}
.popover-content .popover-line{
background-color: #ff00ff;
border-bottom: 2px solid #121212;
padding: 10px 15px;
}
</style>
</script>
If you write this way your custom CSS then it will work property. See the Image below how I write code.
I hope it will help your project.
I was trying to parse from a complicated html page, but someone told me a better way is to inject my own css into that html. So I have the following situation:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div>
layer one div
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
</body>
</html>
As you can see the div with id is sandwiched between a parent div and a child div.
I wonder if it is possible to hide the parent and child, making the page only show layer two div line. I try doing
div { display: none; }
div#center { display: inline;}
but without success.
I am using the indent method now, thank you for all the help, guys! : )
Here is kind of a hack, but it works:
HTML
<div>
layer one div
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
CSS
div {
text-indent: -9999px;
}
div#center {
text-indent: 0px;
}
div#center div {
display: none;
}
Fiddle: http://jsfiddle.net/fPdda/2/
As far as I know, there is no option to show element which is placed under hidden element. So CSS will not do the trick. The only possible option is use javascript, which move element which is supposed to be visible out of parent. This can be easily done with jQuery.
However I don't know why you need this and what you mean with word "parse". CSS will affect only what you see, but under "parse" I understand processing data - and for processing is not important how it is shown. Maybe if you specify more detailed what you need, I can help.
This method will not work. Sadly, because your displayed div is inside a hidden div, you're sunk if you're stuck with that markup. You could get fancy and use text-indent: -9999px instead of display: hidden, then text-indent: 0px on the one you want to show, but the negative indented elements will still take up vertical space. Alternately, you could use JS to duplicate the node and re-insert it into the DOM at a different point, maybe inside an element that isn't hidden.
var nodeToShow = document.getElementById('center').cloneNode();
nodeToShow.setAttribute('id', 'centerClone');
document.body.appendChild(nodeToShow);
I don't think that is possible. Hiding the parent div takes precedence on the child, so your child with id is visible but only in the scope of parent div which is hidden. In order to accomplish what you trying to do just wrap the parent text in a span and hide the span;
div span{
display:hidden;
}
div#center div{
display:hidden;
}
You can't hide a parent yet make a child element visible, it just doesn't work that way. I would suggest doing something like this:
<div class="layer-one">
<span class="layer-one">layer one div</span>
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
.
div,
span.layer-one {
display: none;
}
div.layer-one,
div#center {
display: block;
}
Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of question].
Here is a portion of a form page being displayed in Firefox:
The blue boxes are temporary stylings of a <label> tag and the orange lines are temporary border styles of the <div> tags (so I can see where they extend and break). The <label>'s are styled to float: left as are the <div's on the right. In addition, the descendant controls of the <div> are also float:left purely so they will line up on the top of the <div> (since there are some taller controls like multiline textboxes down below).
The radio buttons are generated by an ASP control, so they are wrapped in a <span> - also floated left since it is a descendant of the <div>.
Here is the same portion of the screen rendered in IE7:
There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <input> controls! Note that the <span>'s around the radio buttons and checkboxes line up correctly.
Although they aren't shown, the same thing happens with drop-down lists and list boxes. I haven't tried wrapping the input controls in a <span>, but that might work. It's an ugly hack, though.
I've tried several of the IE7 workarounds for box issues and I've edited the CSS until I'm in pure voodoo mode (i.e., making random changes hoping something works). Like I said, I hope someone will look at this and say, "I've seen that before! Try this..."
Anyone?
Followup 1:
I'm using the XHTML 1.0 Transitional <DOCTYPE>, so I should be in standards mode.
Followup 2:
Here is a small snippet of the generated code for the above (the first control and the last control). Note that this code was generated by ASP.Net and then dynamically edited by JavaScript/jQuery.
<fieldset id="RequestInformation">
<legend>Request Information</legend>
<ol>
<li>
<label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
<div class="FormGroup">
<input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker"
type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
<img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
<span id="txtRequestDate_error"/>
</div>
</li>
--STUFF DELETED HERE--
<li>
<label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
<div class="FormGroup">
<span class="stdCheckBox">
<input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
</span>
</div>
</li>
</ol>
</fieldset>
Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):
div
{
border-style: solid;
border-width: thin;
border-color:Orange;
}
label
{
border-style: solid;
border-width: thin;
border-color:Blue;
}
.FormGroup
{
float:left;
margin-left: 1em;
clear: right;
width: 75em;
}
.FormGroup > *
{
float:left;
background-color: Yellow;
}
fieldset ol
{
list-style: none;
}
fieldset li
{
padding-bottom: 0.5em;
}
li > label:first-child
{
display: block;
float: left;
width: 10em;
clear: left;
margin-bottom: 0.5em;
}
em
{
color: Red;
font-weight: bold;
}
Solution!
Matthew pointed me to this page on IE/Win Inherited Margins on Form Elements and that was the problem. The input boxes were inheriting the left margins of all of their containing elements. The solution I chose was to wrap each <input> element in an unstyled <span>. I've been trying to keep the structure of the HTML as semantically sound as possible, so I solved it using a jQuery command in the $(document).ready() function:
//IE Margin fix:
// http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$(":input").wrap("<span></span>");
}
});
Note that this will only add the stupid <span>'s on IE...
StackOverflow to the rescue again!
The input is inheriting the margins from the surrounding div and the ol. If you surround it with another tag like a span or a div, it should solve your problem.
Edit: You can find more information and workarounds at http://www.positioniseverything.net/explorer/inherited_margin.html
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 ;-)