My question is one that I was sure would be a common one, but to the best of my efforts, I cannot find any tutorials about this at all.
I am looking to build a text & image navigation menu for a website. It seems to me that many people would want to do something like this, but either I am totally missing a simple concept or many people aren't looking to do something like this.
My Exact Goal: Create a navigation menu with pictures on top and CSS styled text on the bottom. When you focus or hover over the picture, the image changes AND the text changes as if they were one item.
My Problem: On my button, if you hover over the text, the image and text change. If you hover over the image, ONLY THE IMAGE changes as if they are two separate entities.
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>
<ul>
<li id="onlineRugStore"><b>Button</b></li>
</ul>
The CSS:
body{
background-color:#e8f1c4;
}
#onlineRugStore a{
display:block;
width:191px;
height:107px;
background:url('bestimages/test/worktest.gif') 0 0;
}
#onlineRugStore a:hover{
background:url('bestimages/test/worktest.gif') 0 -107px;
}
#test b{
position:absolute;
text-align:center;
margin:110px 0 0 0;
font-size:18px;
color:white;
text-decoration:none;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
width:191px;
height:24px;
background-color:#cc7bd6;
opacity:0.45;
filter:alpha(opacity=45);
padding:4px 0 0 0;
}
#test b:hover{
opacity:1.0;
}
ul{
list-style-type:none;
}
An example of what I am talking about can be viewed at: http://kokorugs.com/test2.php
After exhausting all efforts, I thought that this may be impossible, and then I found a working example on the following website: http://www.amazeelabs.com/en (notice the navigation menu).
I appreciate any and all help.
Happy Holidays,
Raphael
I've created a JSfiddle for you: http://jsfiddle.net/drXng/
The code you see in the CSS should explain clearly what is going on.
/*CSS you want to apply to the element wrapping both the text and picture*/
.both {
opacity: 0.5;
width: 200px;
height: 200px;
display: block;
}
/*CSS you want to apply to the text only before it is hovered*/
.text {
background-color: green;
}
/*CSS you want to apply to the picture only before it is hovered*/
.picture {
width: 50px;
height: 50px;
}
/*CSS you want to apply to the element wrapping both both the text and picture after hovered*/
.both:hover {
opacity: 1;
}
/*CSS you want to apply to text when both are hovered*/
.both:hover .text {
background-color: blue;
}
/*CSS you want to apply to picture when both are hovered*/
.both:hover .picture {
background-color: red;
}
In your case, it could be easily done by changing .both to ul. For example, the following css will change #test b's opacity as long as anything inside ul is hovered.
ul:hover #test b{
opacity:1.0;
}
P.S. as a word of advice, try to avoid using ID selectors in CSS if you can. :)
Related
My html:
<!DOCTYPE html>
<html>
<head>
<style>
li {
font-weight: bold;
text-align: right;
}
</style>
</head>
<body>
<li>Consultation</li>
<li>Pharmacist</li>
<li>Registration No.</li>
</body>
</html>
Currently the bullet-points appear to the left of the list items ;
Can I make the dots go on the right ?
i) direction:rtl; should do the trick, since you have added text-align:right to the li, the li is right aligned. play around and you will be able to use it to suit your needs
DEMO
CSS:
li{
font-weight:bold;
text-align:right;
direction:rtl;}
ii) In case if you are looking to add "*" required symbol next to each item like the one you mentioned in the url. You can do the below.
DEMO
CSS:
li {
display:block;
list-style:none;
}
li:after {
content:"*";
}
iii) Or you can set the list-style-type:none and set background image for the bullet like in this example: Background images for bullet
Use direction: rtl; to make text and list item bullets orient right-to-left.
li {
font-weight: bold;
text-align: right;
direction: rtl;
}
https://jsfiddle.net/tyew2s8f/
More Reading
https://developer.mozilla.org/en-US/docs/Web/CSS/direction
https://www.w3.org/International/questions/qa-bidi-css-markup
You can use direction: rtl;. The direction property specifies the text direction/writing direction.
Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.
If you want the bullet-points to the right but with text align left
li {
display:block;
list-style:none;
width: 200px;
position: relative;
}
li::after {
content: "•";
display: inline-block;
position: absolute;
right: 0;
}
<ul>
<li>Consultation</li>
<li>Pharmacist</li>
<li>Registration No.</li>
</ul>
Here's something that you could do.
`<style>
li {
list-style-type:none;
}
</style>`
^ That will get rid of the bullets
then manually add in • inside of your li tag
for example <li>Consultation •</li>
I'm working on a psd to html and I have an image like so:
So meaning I have a tag with Image. My problem now is how can I design the link in there? Do I need to have a <br /> after the text or what?
<ul id="steps-nav">
<li>
<img src="img/building-details.png" alt="Building Details"/>
STEP 1: ENTER YOUR BUILDING DETAILS
</li>
<li>
<img src="img/electricity-details.png" alt="Electricity Details"/>
<a href="#">STEP 2: ENTER YOUR
ELECTRICITY DETAILS</a>
</li>
</ul>
Here's my CSS:
#steps-container{
background-color:#0a0806;
opacity: 0.7;
margin-top: 43px;
border-bottom: solid 10px #abd038;
}
#steps-container .steps{
width:960px;
margin:auto;
height:50px;
}
#steps-container .steps ul li{
float:left;
}
#steps-container .steps ul li a{
text-decoration: none;
color:#ffffff;
border:solid 1px;
}
#steps-container .steps ul li a:after{
content:"\A"; white-space:pre;
}
Problem 1: You want the image to be clickable with the link.
Solution: Wrap the a anchor around the image and the text, not just the text.
Problem 2: You want the text to be on multiple lines next to it.
Solutions:
a. You could go in the general direction you were trying, directly attaching the image and putting text next to it.
b. You could set the image as a background with padding. The image itself would not be accessible via the alt attribute, but the label does provide that extra information.
http://jsfiddle.net/D4vyM/
This will make the list items in the same line:
#steps-nav li {
display: inline-block;
}
Make the anchor fill up the box created by the list item and make space for the image:
.some-step {
padding-left: 50px;
display:block;
width: 100%;
height: 100%;
}
And we will add styling to the text being focused on, which is also brought to the new line:
.step-focus {
font-weight: bold;
display: block;
}
Use the display property to specifies the type of box used for an element. A simple example of how to make a new line without using br in css.
Example :
a {
display: block;
}
Put <a> tag inside <div> tag. Should do the trick. <div> tags are acceptable inside the li
If you can't use div then use:
a:after { content:"\A"; white-space:pre; }
EDIT
Just use <br /> tag.
I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):
div.activelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.activelayer:hover {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.inactivelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer:hover {
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
cursor: text;
}
#innertab .alink {
margin-top:18px;
text-align:center;
margin-left:0px;
}
#innertab a.tablink {
color: #ffffff;
text-align: center;
}
#innertab a.tablink:hover {
text-decoration: none;
color: #ffffff;
text-align: center;
}
/* IDs */
#menu1 {
z-index:10;
}
#menu2 {
z-index:9;
}
#menu3 {
z-index:8;
}
#menu4 {
z-index:7;
}
#menu5 {
z-index:6;
}
In the aspx page, I have this:
<div id="innerTab" class="" style="width: 1000px; height: 72px;">
<div id="menu1" class="selectedlayer" style="margin-left:0px">
<div class="alink">
Menu Item 1
</div>
</div>
<div id="menu2" class="activelayer">
<div class="alink">
Menu Item 2
</div>
</div>
<div id="menu3" class="activelayer">
<div class="alink">
Menu Item 3
</div>
</div>
<div id="menu4" class="activelayer">
<div class="alink">
Menu Item 4
</div>
</div>
<div id="menu5" class="inactivelayer">
<div class="alink">
Menu Item 5
</div>
</div>
</div>
The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.
I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.
Is there something that I missed in the code? Please help :(
Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(
thanks,
Poch
Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:
margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px
You'd just change your selector to this:
.someClass .someOtherClass #someId #innertab a.alink
Your selector is now stronger and will be applied.
Try adding !important, like so:
div.activelayer {
margin-left:-30px!important;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
text-align:center!important;
height:55px!important;
width:200px!important;
display:inline-block!important;
position:relative!important;
float:left!important;
}
I had a similar issue with this a few weeks back. I couldn't find an exact resource that said it, but through trial and error I was able to find that I could only apply CSS Psuedo classes (Like :hover and :active) to <a> tags within SharePoint when browsing in IE. The code you posted above has :hover / :active on <div> tags.
I was able to get a working solution by using image sprites, styling the anchor tags, and nesting the image sprite within the <a> tags with the following HTML and CSS:
HTML
<ul id="wheel" class="wheel"><li>
<img src="images1/design.png"></li>
</ul>
CSS
.wheel li a, .wheel li a:visited{
width: 50px;
height: 50px;
overflow: hidden;
}
.wheel li img
{
position: relative;
display: block;
}
.wheel a:hover img{
left: -51px;
}
.wheel a:active img{
left: -102px;
}
On the off chance you haven't solved this issue, hope this helps!
I have a background color on my links (on hover, rails-style). And I have an img inside an a-tag that I don't want to have a background on hover.
I tried
a:hover img{ background-color: #fff; }
but that's not doing anything. How do I exclude img-tags inside a-tags from the hover?
Thx,
MrB
edit: jsFiddle
http://jsfiddle.net/rasvf/1/
In the example: "google" has a red background on hover, as intended. But when you hover over the image, it also does. It's supposed not to have a hover background.
if i understand you correctly, i think you are trying to do something like this:
a:hover img{ visibility: hidden; }
or
a:hover img{ display: none; }
EDIT
In that case you want:
a:hover img {background-color: transparent;}
Example posted on: http://jsfiddle.net/6qwJy/
It's hard to understand your example. Say I have this piece of HTML:
<a class="foo" href="#"><img src="bar.gif"/> Click me</a>
then with these style rules
a#foo:hover { background-color: blue; }
a#foo img { background-color: white; }
the image background color will always be white, also on hover.
If however you have background images on the element that contains your link and you want that to show behind the foreground image, then you can't do this. In that case you'll have to wrap the "Click me" text of the link in a span and write in your stylesheet:
a#foo:hover span { background-color: blue; }
Is this what you intended?
Ah! I did it. Easy. I just put the not-to-have-a-background-image in a different div and then did:
.otherdiv a:hover{ background-color: transparent; }
a img {
vertical-align: bottom;
}
Ok, you won't believe me, but I had the same problem above and I resolved as follows:
I had something like this:
<img src"path/to/image.gif">
And in my CSS I had:
a:hover { text-decoration: underline; }
And, believe me, I just had to put the 'img' tag in the same line as the 'a' tag, like this:
<img src="path/to/img.gif">
And that was all!!!
I would like to show a div when someone hovers over an <a> element, but I would like to do this in CSS and not JavaScript. Do you know how this can be achieved?
You can do something like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.
HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
jsfiddle
Since this answer is popular I think a small explanation is needed. Using this method when you hover on the internal element, it wont disappear.
Because the .showme is inside .showhim it will not disappear when you move your mouse between the two lines of text (or whatever it is).
These are example of quirqs you need to take care of when implementing such behavior.
It all depends what you need this for. This method is better for a menu style scenario, while Yi Jiang's is better for tooltips.
I found using opacity is better, it allows you to add css3 transitions to make a nice finished hover effect. The transitions will just be dropped by older IE browsers, so it degrades gracefully to.
#stuff {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-bottom:15px;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
I'm by no means an expert, but I'm incredibly proud of myself for having worked something out about this code. If you do:
div {
display: none;
}
a:hover > div {
display: block;
}
Note the >, a direct child selector.
You can contain the whole thing in an a tag, then, as long as your trigger (which can be in it's own div, or straight up in the a tag, or anything you want) is physically touching the revealed div, you can move your mouse from one to the other.
Maybe this isn't useful for a great deal, but I had to set my revealed div to overflow: auto, so sometimes it had scroll bars, which couldn't be used as soon as you move away from the div.
In fact, after finally working out how to make the revealed div, (although it is now a child of the trigger, not a sibling), sit behind the trigger, in terms of z-index, (with a little help from this page: How to get a parent element to appear above child) you don't even have to roll over the revealed div to scroll it, just stay hovering over the trigger and use your wheel, or whatever.
My revealed div covers most of the page, so this technique makes it a lot more permanent, rather than the screen flashing from one state to another with every move of the mouse. It's really intuitive actually, hence why I'm really quite proud of myself.
The only downside is that you can't put links within the whole thing, but you can use the whole thing as one big link.
This answer doesn't require that you know the what type of display (inline, etc.) the hideable element is supposed to be when being shown:
.hoverable:not(:hover) + .show-on-hover {
display: none;
}
<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>
<hr />
<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>
This uses the adjacent sibling selector and the not selector.
I would like to offer this general purpose template solution that expands on the correct solution provided by Yi Jiang's.
The additional benefits include:
support for hovering over any element type, or multiple elements;
the popup can be any element type or set of elements, including objects;
self-documenting code;
ensures the pop-up appears over the other elements;
a sound basis to follow if you are generating html code from a database.
In the html you place the following structure:
<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
</div>
In the css you place the following structure:
div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
A few points to note are:
Because the position of the div.popup is set to fixed (would also work with absolute) the content is not inside the normal flow of the document which allows the visible attribute to work well.
z-index is set to ensure that the div.popup appears above the other page elements.
The information_popup_container is set to a small size and thus cannot be hovered over.
This code only supports hovering over the div.information element. To support hovering over both the div.information and div.popup then see Hover Over The Popup below.
It has been tested and works as expected in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 and Google Chrome 28.0.15.
Hover Over The Popup
As additional information. When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace:
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
with
div.information_popup_container > div.information:hover + div.popup_information
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}
And second, adjust the position of div.popup so that there is an overlap with div.information. A few pixels is sufficient to ensure that the div.popup is can receive the hover when moving the cusor off div.information.
This does not work as expected with Internet Explorer 10.0.9200 and does work as expected with Opera 12.16, Firefox 18.0 and Google Chrome 28.0.15.
See fiddle http://jsfiddle.net/F68Le/ for a complete example with a popup multilevel menu.
The + allow 'select' only first not nested element , the > select nested elements only - the better is to use ~ which allow to select arbitrary element which is child of parent hovered element. Using opacity/width and transition you can provide smooth appear
div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }
.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }
<div class="aaa">Hover me... to see<br><br> </div>
<div class='bbb'>BBBBB
<div class='ccc'>CCCCC
<div class='ddd'>DDDDD</div>
</div>
</div>
<div class='eee'>EEEEE
<div class='fff'>FFFFF
<div class='ggg'>GGGGG</div>
<div class='hhh'>HHHHH</div>
</div>
</div>
please test this code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
0% {background:blue;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background:white;}
50% {background:blue;}
100% {background:green;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
a:hover + div{
display:inline;
}
</style>
</head>
<body>
Hover over me!
<div>the color is changing now</div>
<div></div>
</body>
</html>
For me, if I want to interact with the hidden div without seeing it disappear each time I leave the triggering element (a in that case) I must add:
div:hover {
display: block;
}
Based on the main answer, this is an example, useful to display an information tooltip when clicking on a ? near a link:
document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };
document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }
document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };
#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }
#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }
Delete all obsolete informations<span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>
HTML
<div>
<h4>Show content</h4>
</div>
<div>
<p>Hello World</p>
</div>
CSS
div+div {
display: none;
}
div:hover +div {
display: block;
}
CodePen :hover on div show text in another div
If you follow this method, element will appear even if you hover over the hidden element. This will be useful if you want to click on the hidden element. For an example you might want to see a delete option and then click on it.
<style>
#delete_link {
display: none;
}
a:hover + #delete_link {
display: block;
}
#delete_link:hover{
display: block;
}
</style>
</head>
<body>
<a>Hover over me!</a>
<div id="delete_link">Element show on hover</div>
</body>
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>
<div class="expand">expand</div>
<div class="expandable">expandable</div>
, it resulted that it does expand using the second , but does not expand using the first one. So if there is a div between the hover target and the hidden div, then it will not work.
Don't forget. if you are trying to hover around an image, you have to put it around a container.
css:
.brand:hover + .brand-sales {
display: block;
}
.brand-sales {
display: none;
}
If you hover on this:
<span className="brand">
<img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg"
alt"some image class="product-card-place-logo"/>
</span>
This will show:
<div class="product-card-sales-container brand-sales">
<div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>