I am going to create a cascading menu with divs, for example when an <a> hovered another div shows:
I can create it with li and ul but want to do it with div.
My problem: When mouse pointer is on <a> the div shows but when mouse pointer come to div, div will disappear (display:none;)
this is my demo
<div id="topDiv">
<img src="http://www.balit.ir/kgl/pic/user/logo.png" id="logo"/>
<div id="rightTopMenu">
<a href="about.html">About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
</a>
Contact KGL
KGL Website
KGL Gallery
</div>
My CSS:
body{
margin:0;
}
#topDiv{
position:absolute;
background: black;
}
#logo{
width:65px;
height:auto;
margin-left:40px;
}
#rightTopMenu{
float:right;
margin-top:20px;
}
#rightTopMenu a{
position:relative;
color: white;
display: inline-block;
text-align: center;
text-decoration:none;
width: 103px;
}
.hoverMenuDiv{
position:absolute;
top:40px;
background:#CAD20E;
display:none;
text-align:center;
width:130px;
}
#rightTopMenu a:hover, #rightTopMenu a:focus{
color:#CAD20E;
}
#rightTopMenu a:hover+.hoverMenuDiv{
display:block;
}
JSFiddle
In your CSS, you need
.hoverMenuDiv:hover{
display:block;
}
This ensures that when you hover over the div, it will stay there.
Also, in my JSFiddle, I've put your HTML to this:
About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
You can't have <a> tags in <a>'s.
Here is a second JSFiddle with the previous work done, but also deleting top in .hoverMenuTop. I think it looks better this way and behaves how most websites would.
You have to add this when the user is inside menu.
.hoverMenuDiv:hover{
display:block;
}
also remove top from this class .hoverMenuDiv
fiddle
This selector is too broad. It is targeting ALL of your anchors.
#rightTopMenu a { ... }
You need to only select the immediate child:
#rightTopMenu > a {
Also, consider using an unordered list as your menu container, not nested A-tags.
See: http://www.dhtmlgoodies.com/?whichScript=dhtmlgoodies_menu3
Consider using the '>' selector instead of the '+' selector, like this:
#rightTopMenu:hover>.hoverMenuDiv{
display:block;
}
The '+' selector is used for finding subsequent tags, but .hoverMenuDiv is actually a child tag of #rightTopMenu.
See w3 schools for a quick reference on this.
Related
I have a Get in Touch button on the bottom of this page:
In the mobile version (less than 770px) of the site I would like it to be centered.
HTML:
<div class="white, home_contact_btn wpb_column vc_column_container vc_col-sm-4">
<div class="wpb_wrapper">
<a class="laborator-btn btn btn-index-1 btn-type-standard contact-btn btn-primary btn-normal" target="" title="GET IN CONTACT" href="http://www.estiponagroup.com/dev/contact/">GET IN TOUCH</a>
</div>
</div>
CSS
.home_contact_btn a{
margin:0 auto;
text-align:center;
}
An anchor is inherently an inline element and can be centered by applying text-align:center; to its parent element:
.wpb_wrapper{
text-align:center;
}
Additionally, if you wanted it to be centered without targeting the parent, you can make the inline element display as a block level element and then center the text inside of it.
.home_contact_btn a{
display:block;
text-align:center;
}
And finally, if you have a certain width you want to have on the button, add that width and then you can use the auto-margins from your code.
.home_contact_btn a{
display:block;
text-align:center;
width:50%;
margin:0 auto;
}
set to the parent container text-align:center;
#media (max-width:700px){
.wpb_wrapper{
text-align:center;
}
.home_contact_btn a{
text-align:center;
}
}
fiddle
Simply use this :
.home_contact_btn a{
display : block;
text-align : center;
margin : 0 auto;
}
Alternatively, use this :
.wpb_wrapper {
text-align : center;
}
Both of them works, but I'll recommend you using the first option because in the second option all anchors (<a> elements) will be centered.
If you don't have any other anchor in the parent element of your 'Get in Touch' button, then second option will also work as expected.
I'am currently working some code for my website and i came to this problem.I want to change background of paragraph on div's hover but it doesn't seems to works.I found some tutorials and I don't know what is wrong with my code
<style>
.more_news{
padding:10px;
border:1px double lightgray;
width:170px;
height:100px;
overflow: hidden;
margin:0px;
}
.more_news img{
width:100%;
height:100%;
}
.more_news p{
color:green;
position:absolute;
display:block;
background:gray;
margin-top:-40px;
width:170px;
height:40px;
}
.more_news div:hover ~ .more_news p{
background:red;
}
</style>
<div class="more_news">
<img src="images/proba1.png" class="more_news_img">
<p class="more_news_p">Hello</p>
</div>
All you need to do is select the class and element like so:
p.more_news_p:hover {
background:red;
}
No need for ~ or any other combinator/selector
http://jsfiddle.net/7H4XW/
Or, if you want to change the background when you hover over the entire div you can do something like this:
.more_news:hover p.more_news_p {
background:red;
}
http://jsfiddle.net/qfb9Z/
"I want to change background of paragraph on div's hover but it
doesn't seems to works."
You'd just use:
.more_news:hover > .more_news_p {
background:red;
}
You were using the general sibling selector ~, which selects sibling elements after that element.
whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)
jsFiddle here
I want to show a div when I click on the image, but the div id not staying put when I am not clicking on the image similar to this site http://www.google.com/nexus/ my jsfiddle http://jsfiddle.net/7KJy4/.
please check my code and update if neccessary thanks! My html code contains a simple div and list items displayed as inline. I used element :active for the pop up when i clicked on the image, but when i clicked on the image the div does not hold for the user to click on the nav links.http://jsfiddle.net/7KJy4/
My html
<div id="hover">
<img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-24.png">
<div id="menu">
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
</div>
</div>
my css
*
{
margin:0;
padding:0;
}
#hover
{
width:100px;
height:300px;
}
#hover:active > #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
#menu
{
visibility:hidden;
}
li
{
}
If you want to do it in pure css, you have to use :focus instead of :active and focus on the image:
#hover > img:focus + #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
You will also need to add "tabIndex" to the image so it can receive focus.
DEMO: http://jsfiddle.net/7KJy4/1/
The side-effect of this approch - user can Tab into the image so your menu can be activated by keyboard as well.
If you want to to it on click without above approach you will have to use some JS.
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>