{"id":14854,"date":"2020-12-08T21:14:07","date_gmt":"2020-12-09T05:14:07","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14854"},"modified":"2023-12-01T04:05:45","modified_gmt":"2023-12-01T12:05:45","slug":"css-hover","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-hover\/","title":{"rendered":"CSS Hover: A How-To Guide"},"content":{"rendered":"\n<p><em>The CSS :hover selector selects an element when you hover over that element with your cursor. For instance, you can use :hover to change the color of a link when you hover over the link.<\/em><\/p>\n\n\n\n<p>You may want to transition the styles that apply to an element on your web page when the user hovers over that element.<\/p>\n\n\n\n<p>That\u2019s where the CSS :hover selector comes in. The :hover selector allows you to select elements when you mouse over them. This lets you apply styles when the user hovers over the element.<\/p>\n\n\n\n<p>This tutorial will discuss, with examples, the basics of selectors in CSS, and how to use the CSS :hover selector. By the end of this tutorial, you\u2019ll be an expert at selecting elements to which styles should apply using :hover.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Selectors<\/h2>\n\n\n\n<p>In CSS, selectors are used to select the HTML elements to which you want to apply styles on a web page. Selectors allow you to choose elements depending on their id, class, group, or attributes, so that you can apply certain styles to specific elements.<\/p>\n\n\n\n<p>For instance, suppose you want to make all &lt;h1&gt; tags in an HTML document appear with a hot pink background. You could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h1 {\n\tbackground-color: hotpink;\n}<\/pre><\/div>\n\n\n\n<p>In this code, we use the &lt;h1&gt; selector which is used to select all &lt;h1&gt; tags on the web page. Then, enclosed within curly brackets, we specify the style we want to apply to the &lt;h1&gt; tags on the web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS :hover Selector<\/h2>\n\n\n\n<p>The CSS :hover selector selects an element when you hover over the element with your mouse. :hover can be used on any CSS element, but it is commonly used on links. :hover is specified after the name of the element you want to select, such as a:hover for a link.<\/p>\n\n\n\n<p>There are a wide range of scenarios where you may want to use the :hover selector. Here are a few potential use cases for the selector:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Changing the color of text when the user mouses over a line of text.<\/li><li>Changing the size of an image when the user mouses over the image.<\/li><li>Changing the color of a button when the user mouses over the button.<\/li><\/ul>\n\n\n\n<p>In all these use cases, a specific style is applied when the user hovers over an element with their cursor.<\/p>\n\n\n\n<p>The syntax for the :hover selector is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>selector:hover {\n\t\/\/ CSS rules\n}<\/pre><\/div>\n\n\n\n<p>Here are the main components of the :hover syntax:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>selector<\/strong> is the range of elements to which the :hover selector will be applied. So, if you wanted the :hover effect to trigger whenever a user hovers over a &lt;h3&gt; element, you would specify <em>h3<\/em>.<\/li><li><strong>:hover<\/strong> instructs the browser that the styles in the CSS rule should only be applied when the user is hovering over a certain element. This element is by the <strong>selector<\/strong> property.<\/li><li><strong>CSS rules<\/strong> are the styles that should be applied when the user hovers over the elements defined by the <strong>selector<\/strong>. For instance, you could specify the font size for text or the background color of a &lt;div&gt; tag. Or you could specify the border radius of an &lt;input&gt; field.<\/li><\/ul>\n\n\n\n<p>Let\u2019s walk through a few examples to demonstrate how you as a web developer can use the CSS :hover selector.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">:hover CSS Examples<\/h2>\n\n\n\n<p>There are a number of ways in which the :hover selector could be used. Below we are going to walk through a few common scenarios where the :hover selector could be useful.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Hover Effect: Change the Color of a Link<\/h3>\n\n\n\n<p>The :hover selector allows us to change the color of a link when the user hovers over the link.<\/p>\n\n\n\n<p>Suppose we are designing a link that contains the text <em>Career Karma homepage<\/em> and sends the user to the Career Karma site. This link is set to appear in the color <em>lightgreen<\/em> on our web page.<\/p>\n\n\n\n<p>We want the link to change to <em>orange<\/em> when the user hovers over the link with their cursor. To create this effect, we could use the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;a href=&quot;https:\/\/careerkarma.com&quot;&gt;Career Karma homepage&lt;\/a&gt;\n&lt;html&gt;\n  \n&lt;style&gt;\n\na {\n\tcolor: lightgreen;\n}\n\na:hover {\n\tcolor: orange;\n}\n&lt;style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em> <\/p>\n\n\n\n<p>Let\u2019s break down our code.<\/p>\n\n\n\n<p>In our HTML file, we define a link to the Career Karma homepage using an &lt;a&gt; tag. Then, in our CSS code, we define two rules.<\/p>\n\n\n\n<p>The first rule applies to all <a href=\"https:\/\/careerkarma.com\/blog\/hyperlink-in-html\/\">HTML &lt;a&gt;<\/a> tags on our web page. Our rule sets the text color of all &lt;a&gt; tags to <em>lightgreen<\/em> using the <em>color<\/em> property.<\/p>\n\n\n\n<p>The second rule changes the color of an &lt;a&gt; tag on the web page to orange when the user hovers over the &lt;a&gt; tag. This is achieved using the :hover selector.<\/p>\n\n\n\n<p>So, when the user hovers over the text <em>Career Karma homepage<\/em>, the color of the link changes to orange.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Hover Effect: Show a Block of Text<\/h3>\n\n\n\n<p>The :hover selector could also be used to show a block of text when the user hovers over a line of text.<\/p>\n\n\n\n<p>Suppose we are designing a Frequently Asked Questions page for the Career Karma website. When the user hovers over a question, a block of text should appear with the answer to their question. We could create an example question using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;span&gt;What is Career Karma?&lt;\/span&gt;\n&lt;div&gt;Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.&lt;\/div&gt;\n&lt;html&gt;\n  \n&lt;style&gt;\n\ndiv {\n\tdisplay: none;\n\tbackground-color: orange;\n\tpadding: 10px;\n}\n\nspan:hover + div {\n\tdisplay: block;\n}\n&lt;style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We used a &lt;span&gt; tag to create the question &#8220;<em>What is Career Karma?&#8221;<\/em> which appears on our web page. Then, we used a &lt;div&gt; tag which contains the answer to the question.<\/p>\n\n\n\n<p>In our CSS file, we used the following styles for our &lt;div&gt; tag:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>display: none, which makes our &lt;div&gt; tag invisible.<\/li><li>background-color: orange, which sets the background color of our &lt;div&gt; tag to orange.<\/li><li><a href=\"https:\/\/careerkarma.com\/blog\/css-padding\/\">CSS padding<\/a>: 10px, which creates a 10px gap between the contents of our &lt;div&gt; tag and its borders.<\/li><\/ul>\n\n\n\n<p>We then defined a rule using the span:hover + div selector. This rule changes the style of the <em>display<\/em> rule in our &lt;div&gt; tag to <em>block<\/em>, which makes it appear. So, when the user hovers over our &lt;span&gt; tag (denoted by span:hover), the &lt;div&gt; tag will become visible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change an Image: CSS On Hover<\/h3>\n\n\n\n<p>Another scenario where the :hover selector could be used is to change an image on a web page. The image will change when a user hovers over the image with their computer cursor.<\/p>\n\n\n\n<p>Suppose we are designing a website for a local coffee shop. When a user hovers over the stock image of a coffee on their <em>About<\/em> page, a new image should replace the existing image. The new image should be a stock image of a caf\u00e9.<\/p>\n\n\n\n<p>We could use the following code to accomplish an image hover effect:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;img height=&quot;750&quot; width=&quot;1250&quot; class=&quot;aboutImage&quot; \/&gt;\n&lt;html&gt;\n  \n&lt;style&gt;\n\n.aboutImage {\n\tbackground: url(&quot;https:\/\/images.unsplash.com\/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1062&amp;q=80&quot;);\n}\n\n.aboutImage:hover {\n\tbackground: url(&quot;https:\/\/images.unsplash.com\/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80&quot;);\n}\n&lt;style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We defined an &lt;img&gt; tag which creates an image which is 750px tall by 1250px wide. The class assigned to the tag is called <em>aboutImage<\/em>.<\/p>\n\n\n\n<p>In our CSS file, we declared two rules.<\/p>\n\n\n\n<p>The first rule sets the background image to be displayed in the element with the class name <em>.aboutImage.<\/em> We use a stock photo of a coffee as a background image.<\/p>\n\n\n\n<p>The second rule, .aboutImage:hover, changes the background image of the element with the .aboutImage class that the user is hovering over. The new image that appears is a stock image of a caf\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Other Uses of the :Hover Selector<\/h3>\n\n\n\n<p>As we discussed earlier, there are a number of scenarios where the :hover selector can be useful. If you are looking for more examples of the :hover selector in action, we recommend viewing these other Career Karma tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/careerkarma.com\/blog\/css-transitions\/\">CSS Transition<\/a>: A guide on how to create transitions that appear when a user hovers over an element on a web page.<\/li><li><a href=\"https:\/\/careerkarma.com\/blog\/css-navigation-bar\">CSS Navigation Bar<\/a>: A guide on how to create a navigation bar using CSS.<\/li><li><a href=\"https:\/\/careerkarma.com\/blog\/css-dropdown-menu\">CSS Dropdown Menu<\/a>: A guide on how to create a dropdown menu using CSS.<\/li><\/ul>\n\n\n\n<p>The hover selector is also used to create button hover effects. These effects change the appearance of a button and trigger a hover animation.<\/p>\n\n\n\n<p>We also have a guide on <a href=\"https:\/\/careerkarma.com\/blog\/css-selectors\/\">CSS selectors<\/a> which you can read to learn more about other selectors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS :hover selector allows you to select an element when the user hovers over the element with a cursor. Once an element is selected, you can apply a new set of styles. These are visible until the user stops hovering over the element with their cursor.<\/p>\n\n\n\n<p>This tutorial discussed, with examples, the basics of CSS selectors and how to use the :hover selector. Now you\u2019re ready to start using the :hover selector like a CSS expert!<\/p>\n\n\n\n<p>For advice on top CSS learning resources, courses, and books, check out our <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS guide<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS :hover selector selects an element when you hover over that element with your cursor. For instance, you can use :hover to change the color of a link when you hover over the link. You may want to transition the styles that apply to an element on your web page when the user hovers&hellip;","protected":false},"author":240,"featured_media":14855,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14854","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Hover: A How-To Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS :hover selector allows you to apply styles to an element that the mouse pointer is hovering over. On Career Karma, learn how to use the :hover selector.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-hover\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Hover: A How-To Guide\" \/>\n<meta property=\"og:description\" content=\"The CSS :hover selector allows you to apply styles to an element that the mouse pointer is hovering over. On Career Karma, learn how to use the :hover selector.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-hover\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-09T05:14:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:05:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Hover: A How-To Guide\",\"datePublished\":\"2020-12-09T05:14:07+00:00\",\"dateModified\":\"2023-12-01T12:05:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/\"},\"wordCount\":1511,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-coffee-computer-desk-374006-1.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/\",\"name\":\"CSS Hover: A How-To Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-coffee-computer-desk-374006-1.jpg\",\"datePublished\":\"2020-12-09T05:14:07+00:00\",\"dateModified\":\"2023-12-01T12:05:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS :hover selector allows you to apply styles to an element that the mouse pointer is hovering over. On Career Karma, learn how to use the :hover selector.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-coffee-computer-desk-374006-1.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/business-coffee-computer-desk-374006-1.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-hover\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Hover: A How-To Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Hover: A How-To Guide | Career Karma","description":"The CSS :hover selector allows you to apply styles to an element that the mouse pointer is hovering over. On Career Karma, learn how to use the :hover selector.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-hover\/","og_locale":"en_US","og_type":"article","og_title":"CSS Hover: A How-To Guide","og_description":"The CSS :hover selector allows you to apply styles to an element that the mouse pointer is hovering over. On Career Karma, learn how to use the :hover selector.","og_url":"https:\/\/careerkarma.com\/blog\/css-hover\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-12-09T05:14:07+00:00","article_modified_time":"2023-12-01T12:05:45+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006-1.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-hover\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Hover: A How-To Guide","datePublished":"2020-12-09T05:14:07+00:00","dateModified":"2023-12-01T12:05:45+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-hover\/"},"wordCount":1511,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006-1.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-hover\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-hover\/","url":"https:\/\/careerkarma.com\/blog\/css-hover\/","name":"CSS Hover: A How-To Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006-1.jpg","datePublished":"2020-12-09T05:14:07+00:00","dateModified":"2023-12-01T12:05:45+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS :hover selector allows you to apply styles to an element that the mouse pointer is hovering over. On Career Karma, learn how to use the :hover selector.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-hover\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006-1.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006-1.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-hover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Hover: A How-To Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14854"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14855"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}