{"id":600,"date":"2017-10-03T14:31:29","date_gmt":"2017-10-03T05:31:29","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=600"},"modified":"2017-10-03T14:33:12","modified_gmt":"2017-10-03T05:33:12","slug":"jquery%e3%81%a7hover%e6%99%82%e3%81%ab%e3%82%ad%e3%83%a3%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3%e8%a1%a8%e7%a4%ba","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2017\/10\/jquery%e3%81%a7hover%e6%99%82%e3%81%ab%e3%82%ad%e3%83%a3%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3%e8%a1%a8%e7%a4%ba\/","title":{"rendered":"jQuery\u3067hover\u6642\u306b\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u8868\u793a"},"content":{"rendered":"<p><!-- \u672c\u6587 --><\/p>\n<p>jQuery\u3067\u3001\u753b\u50cf\u3092hover\u6642\u306b\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u8868\u793a\u3055\u305b\u308bJavaScript\u3067\u3059\u3002<br \/>\n<!--more--><br \/>\n\u753b\u50cf\u3092hover\u6642\u306b\u3001alt\u5185\u306e\u6587\u7ae0\u3092\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u8868\u793a\u3055\u305b\u308b\u6a5f\u80fd\u3067\u3059\u3002<br \/>\n\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n$(function () {\r\n    $(\"li\").hover(function () {\r\n        $(this).append(\"<div><p>\" + $(this).children(\"img\").attr(\"alt\") + \"<\/p><\/div>\");\r\n        $(this).children(\"div\").stop().fadeIn(300);\r\n        $(this).children(\"div\").children(\"p\").stop().animate({\r\n            \"top\": 0\r\n        }, 300);\r\n\r\n    }, function () {\r\n        $(this).children(\"div\").stop().fadeOut(300);\r\n        $(this).children(\"div\").children(\"p\").stop().animate({\r\n            \"top\": \"10px\"\r\n        }, 300, function () {\r\n            $(this).parent(\"div\").remove();\r\n        });\r\n\r\n    });\r\n});\r\n\r\n<\/pre>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\n\u25bcCSS\r\n<style type=\"text\/css\">\r\n@charset \"UTF-8\";\r\n\r\nbody{\r\n\tcolor:#333;\r\n}\r\n\r\nheader h1{\r\n\tpadding:20px 25px;\r\n\tcolor:#FFF;\r\n\tbackground:#2f353E;\r\n\tfont-weight:bold;\r\n}\r\n\r\nmain{\r\n\tdisplay:block;\r\n\twidth:1000px;\r\n\tmargin:0 auto;\r\n\tpadding:60px 20px;\r\n}\r\n\r\nmain li{\r\n\tposition:relative;\r\n\tfloat:left;\r\n\twidth:320px;\r\n\tmargin:0 20px 50px 0;\r\n\tcolor:#FFF;\r\n\tline-height:2em;\r\n}\r\n\r\nmain li:nth-child(3n){\r\n\tmargin-right:0;\r\n}\r\n\r\nmain li img{\r\n\tvertical-align:bottom;\r\n}\r\n\r\nmain div{\r\n\tposition:absolute;\r\n\tdisplay:none;\r\n\twidth:100%;\r\n\theight:100%;\r\n\tpadding:20px;\r\n\tbackground:rgba(17, 179, 179, .7);\r\n\ttop:0;\r\n\tleft:0;\r\n\tbox-sizing:border-box;\r\n}\r\n\r\nmain p{\r\n\tposition:relative;\r\n\ttop:10px;\r\n}\r\n<\/pre>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\" >\r\n\u25bcHTML\r\n<main>\r\n    \r\n  <ul>\r\n    <li><img decoding=\"async\" loading=\"lazy\" src=\"photo\/ajisai.jpg\" alt=\"\u30a2\u30b8\u30b5\u30a4\" width=\"320\" height=\"200\"><\/li>\r\n    <li><img decoding=\"async\" loading=\"lazy\" src=\"photo\/chamomile.jpg\" alt=\"\u30ab\u30e2\u30df\u30fc\u30eb\" width=\"320\" height=\"200\"><\/li>\r\n    <li><img decoding=\"async\" loading=\"lazy\" src=\"photo\/clover.jpg\" alt=\"\u30af\u30ed\u30fc\u30d0\u30fc\" width=\"320\" height=\"200\"><\/li>\r\n    <li><img decoding=\"async\" loading=\"lazy\" src=\"photo\/cosmos.jpg\" alt=\"\u30b3\u30b9\u30e2\u30b9\" width=\"320\" height=\"200\"><\/li>\r\n    <li><img decoding=\"async\" loading=\"lazy\" src=\"photo\/sunflower.jpg\" alt=\"\u30d2\u30de\u30ef\u30ea\" width=\"320\" height=\"200\"><\/li>\r\n    <li><img decoding=\"async\" loading=\"lazy\" src=\"photo\/tulip.jpg\" alt=\"\u30c1\u30e5\u30fc\u30ea\u30c3\u30d7\r\n    \" width=\"320\" height=\"200\"><\/li>\r\n  <\/ul>\r\n<\/main>\r\n<\/pre>\n<p>\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001\u4ee5\u4e0b\u306e\u30b5\u30a4\u30c8\u306e\u300eGimmick log\u300f\u3055\u3093\u3067\u3059\u3002\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<br \/>\n<a href=\"http:\/\/gimmicklog.main.jp\/jquery\/223\/\">Gimmick log<\/a><br \/>\n<a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/caption\/caption1003.html\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery\u3067\u3001\u753b\u50cf\u3092hover\u6642\u306b\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u8868\u793a\u3055\u305b\u308bJavaScript\u3067\u3059\u3002<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/600"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":6,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"predecessor-version":[{"id":606,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/600\/revisions\/606"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}