I'm wondering if the following is possible. Have a <button> enclosed in a <div> which is enclosed in a parent <div>. On hover of the child <div> have a dropdown info panel that displays information like email and phone number. I've been working on this for a while (see my fiddle link below), but I can't get the drop down to appear anywhere outside of the parent <div> and moreover, the drop should appear directly below the button as opposed to on top of the button itself.
The button name is "Contact"
https://jsfiddle.net/wtj51d2f/5/
Your .navbar class overflow:hidden is preventing from content going beyond, I just try removing that value, and adding some top: 50px on your .drop-content class, and it is showing good.
The .drop-content has to be a child of the .dropdown element in order to be directly manipulated by it in CSS. You can use JavaScript or jQuery to accomplish this effect, or refactor the page so that .drop-content stays within the .dropdown div.
This is what the jQuery might look like:
$('.dropdown').mouseover(function(){
$('.drop-content').show();
});
Related
Is there a way for me to make links clickable both in an overlay DIV and on the surface behind the DIV?
I know about POINTER-EVENTS: None; but it is not a solution in this case because it only makes links clickable on the surface behind the overlay DIV making links in the DIV untouchable.
Sorry if this is a duplicate question.
The property you want here is z-index. Specifically, you want to make it higher on the anchor tags you want to click on than on the header.
First, you'll want to add a class to the anchor tags (let's call it above-header) for specificity, so that the links all look like this:
Link
Then you'll want to add the following CSS to apply the new positioning to the anchor tags:
.above-header {
position: relative;
z-index: 1001;
}
position: relative will make the z-index applicable to those anchor tags without moving them at all, while z-indez will raise them above the header (and make them clickable) as long as their z-index value is larger than that of the header (which is currently 1000).
I would also lower the z-index on .header-area to 1, and then make the z-index on the anchor tags 2, but that's mostly a matter of code style.
the button are wrapped in a inline-block, but I want to make it align to right. when I do float: right, part of it disappeared
html:
<div class="card answer" id="answer4" href="#answer4">
<div class="btn-text-inline">
React Generated HTML
</div>
</div>
css:
.btn-text-inline {display: inline-block;}

before adding float:right
after float:right
I would advice to add a custom background-color css property to every single element on your website to actually be able to see how much space does each of the elements take. Maybe the buttons are hidden behind another element. In this case, probably behind 'add comment' element
If you know how to use developer tools in your browser, you can achieve the same by opening developer tools and hovering over the elements of interest.
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events
I have a list of links to the left and a fixed div with hidden overflow to the right of a web page. The fixed div is wrapped around 3 additional divs with the same height as the fixed div. Each div nested within the fixed div is linked to one of the links in the list to the left of the fixed div.
This works fine, it essentially simulates a hide/show effect with pure html/css. Now what I have been trying to do is highlight the current link selected in the list of links like you would with a menu item in a navigation bar. I did a similar example in jsfiddle.
I can't seem to be able to highlight the current link with pure html/css so I've been attempting to do it with PHP with no success.
Is there a way to do this without Javascript?
a:focus{
border:solid 1px red;
}
will work partially, but only until focus is moved elsewhere.
If the page is reloaded with each click, then you could use PHP to read the #anchor from the URL and add a class to the appropriate link element.