Showing content on hover

Question

I am relatively new to web design and looking for some help with a problem I have, I have searched around and can't find anything to help me.

This is my code :

HTML:

<div class="menu">
<div id="menuimg"></div>
<span>
<ul>
<li>portfolio.</li>
<li>about.</li>
<li>contact.</li>
</ul>
</span>
<div id="logo"><img src="img/logo1.svg" height="100px" width="100px"></div>

</div>

CSS:

#menuimg {
    position:absolute;
    width:50px;
    height:50px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:50px;
    background:url(../img/menuimgU.png) no-repeat;
    transition:all .5s;
}

.menu {
    position:fixed;
    height:100%;
    width:150px;
    left:0;
    background:#fff;
    -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         3px 0px 5px 0px rgba(50, 50, 50, 0.75);
transition:all .5s;}

.menu:hover {
    height:100%;
    width:225px;
}

span {
    position:relative;
    display:none;}

.menu, span:hover {
    display:inline;
}

The initial question was how to make the un-ordered list show when the .menu class was hovered on.

"The text" - what text? "The hovered element" - what element? — James Donnelly, Jul 03 '14 at 15:34
Simple search of SO shows many questions relating to CSS, Javascript, and hover. eg http://stackoverflow.com/questions/17626952/show-text-on-hover-using-just-js — Upperstage, Jul 03 '14 at 15:35
I am trying to get my list to show in the menu div when it is in hovered state — JWoods, Jul 03 '14 at 15:36
FYI, you should be using .menu in your CSS because your first DIV has a class of menu not an id of menu — JRulle, Jul 03 '14 at 15:48
Thank you for pointing that out, as I said I am relatively new with about 2 months of self teaching. — JWoods, Jul 03 '14 at 15:50
possible duplicate of [Show div on hover with only CSS](http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css) — TylerH, Jul 03 '14 at 15:54

Brennan King · Answer 1 · 2014-07-03T15:53:57.530

0

If I understand your question correctly, you want the list text inside the div "menu" to show up when you hover over "menu".

Why not try the following:

li {
    color:white; --or whatever background color your list has
}

.menu:hover span ul li {
    color:black;
}

fiddle: http://jsfiddle.net/66cK7/

edited Jul 03 '14 at 15:53

answered Jul 03 '14 at 15:44

Brennan King

76
4

Ok I tried that, it still didn't show. I can't seem to explain what I want it to do. So I will link to a page that has the same effect http://piotrswierkowski.com/portfolio/ – JWoods Jul 03 '14 at 15:47
Apologies, menu is a class not an id so it should be a "." not a "#" as I had before. Here is an example I made that worked for me, try hovering over the outlined div: http://jsfiddle.net/66cK7/ – Brennan King Jul 03 '14 at 15:55

score 0 · Accepted Answer · edited Jul 03 '14 at 16:09

edit Based on what the OP is trying to achieve, these are the proper CSS changes:

.menu:hover span ul {
    opacity: 1;
}
span {
    position:relative;
}
ul {
    opacity: 0;
}

jsFiddle

end edit

Here is a JSFiddle that does what you are asking (although I think we need to do some refinement to get to your actual desired behavior - beyond what is explained above)

In addition to fixing your CSS #menu to .menu (changing it from an ID selector to a class selector), here are the other changes:

Show the span when the #menuimg element is hovered (I gave it a black background to make it visible):

#menuimg:hover~span {
    display:inline;
}

Continue to show the span while it is being hovered over:

span:hover {
    display:inline;
}

In order for this to work, the #menuimg element must be intersecting the span when it is displayed. Otherwise, the span will disappear before the mouse can make it from one element to another.

This whole thing would be a lot simpler in JavaScript or jQuery, but hopefully we can jump off from here and make this an iterative answer to get to the endpoint you actually desire.

Yes this is close to what I am trying to achieve, although the #menuimg is no longer needed. So all I need to figure out is how to get my to show when any area of the .menu is hovered on. I think I am over complicating everything in the way I am explaining things. — JWoods, Jul 03 '14 at 16:00
here is the effect you linked to above: [jsFiddle](http://jsfiddle.net/jrulle/4xCh2/2/) — JRulle, Jul 03 '14 at 16:03
Glad it is working, I edited the answer to show the new solution - but I still left the old changes to help illustrate how we got to that point. — JRulle, Jul 03 '14 at 16:07

Showing content on hover

2 Answers2