{"id":398,"date":"2009-06-25T12:24:59","date_gmt":"2009-06-25T12:24:59","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=398"},"modified":"2018-10-14T22:24:47","modified_gmt":"2018-10-14T22:24:47","slug":"how-to-create-a-block-hover-effect-for-a-list-of-links","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/how-to-create-a-block-hover-effect-for-a-list-of-links\/","title":{"rendered":"How to create a block hover effect for a list of links"},"content":{"rendered":"<p>This tutorial explains how to create a block hover effect for a list of links form using a clean CSS design with only li,span and em tags.<br \/>\n<!--more--><\/p>\n<h2>Step:1 Basic HTML Structure<\/h2>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"linkBox\">\r\n    <ul>\r\n      <li><a href=\"#\">Link Heading One\r\n        <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n         Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.<\/em>\r\n        <span>20th june 2009<\/span><\/a><\/li> \r\n        \r\n     <li><a href=\"#\">Link Heading Two\r\n        <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n         Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.<\/em>\r\n        <span>21th june 2009<\/span><\/a><\/li> \r\n        \r\n         <li><a href=\"#\">Link Heading Three\r\n        <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n         Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.<\/em>\r\n        <span>22th june 2009<\/span><\/a><\/li> \r\n    <\/ul>\r\n<\/div> \r\n[\/code]\r\n<\/pre>\n<h2>Step:1 CSS Code<\/h2>\n<pre>\r\n[code lang=\"css\"]\r\n#linkBox ul {\r\n        list-style-type: none;\r\n        width: 400px;\r\n} \r\n\r\n#linkBox li {\r\n        margin: 5px 0;\r\n\tborder-bottom:1px dotted #ccc;\r\n\tborder-top:1px dotted #ccc;\r\n}\r\n\r\n#linkBox li a { \r\n        color: #E67701;\r\n        display: block;\r\n        font: bold 100.1% \"Georgia\", Times New Roman, Times, serif;\r\n        padding: 5px;\r\n        text-decoration: none;\r\n\tline-height:182.5%;\r\n\t\t\r\n}\r\n\r\n * html #linkBox li a {  \/* make hover effect work in IE *\/\r\n\twidth: 400px;\r\n}\r\n\r\n#linkBox li a:hover {\r\n        background: #eeeeee;\r\n}\r\n\r\n#linkBox a em { \r\n        color: #333;\r\n        display: block;\r\n        font: normal 82.5% \"Georgia\", Times New Roman, Times, serif;\r\n        line-height: 182.5%; \r\n}\r\n\r\n#linkBox a span {\r\n        color: #006AFF;\r\n        font: normal 82.5% \"Georgia\", Times New Roman, Times, serif;\r\n        line-height: 150%;\r\n}\r\n[\/code]\r\n<\/pre>\n<h2>The Example<\/h2>\n<p>Finally we are done. we created a block hover effect for a list of links. View <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/06\/how-to-create-css-block-hover-effect-in-list-link.html'>my example<\/a> and roll over the list items to see the block hover effect in action.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains how to create a block hover effect for a list of links form using a clean CSS design with only li,span and em tags.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[],"class_list":["post-398","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":6,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":405,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/398\/revisions\/405"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}