{"id":2996,"date":"2016-03-28T13:45:29","date_gmt":"2016-03-28T18:45:29","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1821"},"modified":"2016-03-28T13:45:29","modified_gmt":"2016-03-28T18:45:29","slug":"create-dropdown-hover-effects-using-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-dropdown-hover-effects-using-css\/","title":{"rendered":"Create Dropdown Hover Effects Using CSS"},"content":{"rendered":"

Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved\u00a0in a much more lightweight way by using CSS.<\/p>\n

\u00a0\"dropdown2\"<\/p>\n

If you want an HTML element to appear when another element is hovered upon, your HTML might look something like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. &lt;<\/span>div class=&quot;<\/span>dropdown&quot;&gt;<\/span><\/div><\/li>\n
  2.         &lt;<\/span>p class=&quot;<\/span>drop&quot;&gt;<\/span>Hover Me&lt;<\/span>\/p&gt;<\/span><\/div><\/li>\n
  3.         &lt;<\/span>div class=&quot;<\/span>hover&quot;&gt;<\/span><\/div><\/li>\n
  4.             &lt;<\/span>p&gt;<\/span>Dropdown Item&lt;<\/span>\/p&gt;<\/span><\/div><\/li>\n
  5.         &lt;<\/span>\/div&gt;<\/span><\/div><\/li>\n
  6.     &lt;<\/span>\/div&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    The .hover div is what you’re going to want to appear when the .dropdown div is hovered upon, so\u00a0it shouldn’t be visible when the page first loads. That can be achieved with the following CSS:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. .hover{<\/span><\/div><\/li>\n
    2.  <\/div><\/li>\n
    3. display<\/span>:<\/span> none<\/span>;<\/span><\/div><\/li>\n
    4.  <\/div><\/li>\n
    5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      To make the .hover div appear when .dropdown is hovered upon, you will also need this line of CSS:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. .dropdown<\/span>:hover <\/span>.hover{<\/span><\/div><\/li>\n
      2.  <\/div><\/li>\n
      3. display<\/span>:<\/span> block<\/span>;<\/span><\/div><\/li>\n
      4.  <\/div><\/li>\n
      5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        That’s all you need to create a simple dropdown hover effect. It can be used to create navigation menus, photo captions that appear upon hover, to enlarge thumbnails upon hover, and more. Experiment with transitions and styling to really make the code your own!<\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

        Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved\u00a0in a much more lightweight way by using CSS.<\/p>\n

        \u00a0<\/p>\n

        If you want an HTML element to appear […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174,181,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2996"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2996"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2996\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}