Solved

Click-able bullets CSS

Posted on 2015-02-13
3
108 Views
Last Modified: 2015-02-16
I have a html list (like image attached) and I want to make:
- the bullet icons and text click-able
- The icons semi transparent.
- Then on hover the bullet icon not transparent.
- The text needs to stay white (not inheriting the opacity)

 example
I am struggling to make the icon click-able and semi transparent ... BUT the text not transparent.

<ul id="floorList">
   <li><a href="#">Ground Floor</a></li>
   <li><a href="#">1st Floor</a></li>
   <li><a href="#" >2nd Floor</a></li>
   <li><a href="#">3rd Floor</a></li>
</ul>

Open in new window


ul#floorList {
    list-style-type: none;
    padding: 0 20px;
    margin: 20px 0 0 0;
    text-transform: uppercase;
    width: 700px;
    float: right;
}

ul#floorList li{
	margin-bottom: 30px;
	float:left;
	width: 320px;
	padding-right: 10px;
}


ul#floorList li a{
    background-repeat: no-repeat;
	background-size: 50px 50px;
	background-image: url('images/icon_touch.png');
    opacity:1;
    padding: 10px 0 10px 60px;
	display: block;
	font-size: 25px;
	font-weight: 600;
	text-decoration: none;
	color: #FFF;
}



ul#floorList li a:hover, ul#floorList li a.active{
	opacity:1;
	background-color: #16A5B3;
}

Open in new window


Could anyone help.
0
Comment
Question by:sjtinsley83
3 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40608735
Here's my attempt at it:
ul#floorList {
    list-style-type: none;
    padding: 0 20px;
    margin: 20px 0 0 0;
    text-transform: uppercase;
    width: 700px;
    float: right;
}

ul#floorList li{
	margin-bottom: 30px;
	float:left;
	width: 320px;
	padding-right: 10px;
}


ul#floorList li a{
    padding: 10px 0 10px 60px;
	display: block;
	font-size: 25px;
	font-weight: 600;
	text-decoration: none;
	color: #FFF;
	height: 50px
}
ul#floorList li a span {
	line-height: 50px;
	height: 50px;
	float: left;
	display: block
}

ul#floorList li a img {
	width: 50px;
	height: 50px;
	opacity: 0.5;
	float: left
}

ul#floorList li:hover a img {
	opacity:1
}

ul#floorList li a:hover, ul#floorList li a.active{
	opacity:1;
	background-color: #16A5B3;
}

Open in new window

<ul id="floorList">
   <li>
   	  <a href="#"><img src="img/images/icon_touch.png" alt="" /><span>Ground Floor</span></a>
   </li>
   <li><a href="#"><img src="img/images/icon_touch.png" alt="" /><span>1st Floor</a></span></li>
   <li><a href="#" ><img src="img/images/icon_touch.png" alt="" /><span>2nd Floor</a></span></li>
   <li><a href="#"><img src="img/images/icon_touch.png" alt="" /><span>3rd Floor</a></span></li>
</ul>

Open in new window

0
 
LVL 6

Accepted Solution

by:
Mikkel Sandberg earned 500 total points
ID: 40608955
You can also use the :before pseudo-element if you don't want to change your HTML code.
So your HTML would stay the same, but then you can use this to create the icons using pseudo-elements:
a:before {
    background-image: url("http://icons.iconarchive.com/icons/icons8/ios7/128/Hands-Hand-icon.png");
    background-size: 20px 20px;
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    opacity: 0.5;
}
a:hover:before {
    opacity: 1;
}

Open in new window


Here's a simple demo on jsfiddle.

I'm not sure which is more semantically correct, but using pseudo-elements keeps your markup a little cleaner. Though it can make your styling a little more complicated.
0
 

Author Closing Comment

by:sjtinsley83
ID: 40612528
Both answers would work perfect! I decided to use the last one!
Thanks
Steve
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now