Tips on altering hover effects?

I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work.

If anyone has any simple links related to this topic, I would greatly appreciate it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p:hover div nav a {
        color: blue;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <a href="">One</a>
        <a href="">Two</a>
        <a href="">Three</a>
      </nav>
    </div>
  </body>
</html>
htmlcsshover

Answer №1

Hey there, I have a quick and easy solution for you!

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        
        
        p:hover + .hv {
        
        color: blue;
        font-size: 22px;
        
        }
        
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <div class="hv">
        <a  href="">One</a>
        <a  href="">Two</a>
        <a  href="">Three</a>
        </div>
      </nav>
    </div>
  </body>
</html>

Answer №2

Hey there! Just wanted to check in to see if you have any questions about the code snippet below:

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       
        
        .hv a:hover{
        
        color: blue;
        font-size: 22px;
        
        }
        
        
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <div class="hv">
        <a  href="">One</a>
        <a  href="">Two</a>
        <a  href="">Three</a>
        </div>
      </nav>
    </div>
  </body>
</html>

Answer №3

Consider using this example: 

div:hover, span:hover {color: red;font-size: 18px;}

Answer №4

The CSS selector p:hover div nav a you're using is incorrect. It's targeting an <a/> element within a <nav/> within a <div/> within a <p/> that is being hovered. The correct way to fix this is shown in the updated code snippet below.

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      nav p { /*selects all hovered <p/> within a <nav/>*/
        color: blue;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <a href="">One</a>
        <a href="">Two</a>
        <a href="">Three</a>
      </nav>
    </div>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The button is only partially visible

My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully. I wonder if I'm missing something with the span element? How can I enlarge the button so that it's bigger and shows the entire "ok" ...

htmlcssbutton

Fetching the jquery variable within an HTML document: A step-by-step guide

Here is the content of my check.js JavaScript file, which includes a function: function fun2(userid) { $.ajax({ type: 'POST', url: 'ex.php', data: {userid: userid}, success: function (data) { ...

javascriptphpjqueryhtml

How can I create square corners within other square corners?

https://i.sstatic.net/OsDsg.png Hey there everyone, I'm curious if it's achievable to create borders like these using only CSS, without relying on a set image. If anyone has insight on how this can be accomplished, please share your knowledge. ...

css

Using CSS to align and place elements

Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images. Key aspects to consider: The bottom edge of the larger div (A) should alig ...

csshtmlbackground-imagecss-position

Browsers seem to only respond to the FileReader onload event on the second try

Currently I am working on implementing in-browser image processing using HTML5 and encountering a strange issue specifically in Chrome. The problem lies with the onload event handler for the File API FileReader class, as the file is only processed correctl ...

javascripthtmlangularjs

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

The implementation of jQuery within an included HTML file may not function properly

I'm looking to implement the use of includes for generic HTML elements in my project. However, I've run into an issue where including an HTML file causes jQuery to stop working. Here is a snippet of my code that illustrates the problem. Specifica ...

jqueryhtmlinclude

Unable to vertically scroll on a position fixed element

I recently created a unique VueJS component that enables vertical scrolling. Within this component, there are two elements each with a height of 100vh. At the bottom of the component is a fixed position div. Interestingly, when I try to scroll down using m ...

htmlcssvue.jstailwind-css

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Is it necessary for every single product to have its very own webpage?

As a newcomer to the world of web development, I'm uncertain about the standard practices. Currently, I am working on creating a small e-commerce website with a wide range of products. Is it recommended to give each item its own dedicated page? Furthe ...

webseohtmlweb-standards

Employing HTML and CSS to restrict the number of characters in sentences

Extracting a few sentences from a JSON file and displaying it in a <p> tag. <p> Thank you all for another wonderful night spent together this past Sunday at The Hippodrome in Baltimore. Thank yo... <p> I want to f ...

htmlcss

Leveraging ASP.NET MVC 5 to integrate an online document viewer from Office 365, seamlessly displaying Word documents within a sleek, compact window

We have been struggling to showcase a Word document (.docx) within an iframe on our website using the Office 365 service. The document is stored in One-Drive for business online and has been appropriately shared. After signing in, we obtained a link to the ...

javascripthtmlasp.net-mvciframeoffice365

When the screen size decreases, HTML images do not adjust accordingly

Hey there, I'm just diving into the HTML and CSS world with FreeCodeCamp's curriculum. The second project involves creating a survey/form, which I've managed to put together quite nicely--except for one small issue with the images. While the ...

htmlcss

Using jQuery to insert a new string into the .css file

I'm currently working on a jQuery function to make my font size responsive to changes in width. While I am aware of other options like Media Query, I prefer a solution that offers smoother transitions. Using vw or vh units is not the approach I want t ...

javascriptjqueryhtmlcss

Preventing users from inputting the same number more than once

Here are a series of text input fields pertaining to a single question: <input type="text" name="{{ $answer->id }}" value="" style="width:20px; text-align:center" maxlength="1" oninput="this.value=this.value.replace(/[^0-5]/g,'');" /> & ...

javascripthtml

Are there any plugins available that can create a Ken Burns effect using JQuery?

All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...

javascriptjquerycssimagetemplates

Model-View-Controller (MVC) and

Apologies for my initial question, as I am new to this. I am having an issue with using a radiobutton for the first time. I want to create a radiobutton that looks like the image provided in the link below: My image When the radio button is checked an ...

htmlasp.net-mvcradio-buttondetailsview

Uploading images in PHP

I need assistance with uploading an image to a server using PHP, saving it inside a directory, and then retrieving the image URL. Here is my HTML code: <form method="post> <fieldset> <div class="form-group col-md-6 col-lg-6 col-sm-1 ...

phphtmlimage

Issue with the width on Mobile Safari

Encountering a strange problem with mobile Safari on iPads and iPhones where the body and some divs are getting cut off in the middle. Despite trying various solutions, I can't seem to fix it. The website works perfectly fine on desktop but not on mob ...

htmlcsscss-floatmobile-safari

Issue with Domsanitizer bypasssecuritytruststyle functionality on Internet Explorer 11 not resolving

CSS:- Implementing the style property from modalStyle in TypeScript <div class="modal" tabindex="1000" [style]="modalStyle" > Angular Component:- Using DomSanitizer to adjust height, display, and min-height properties. While this configuration work ...

cssangularinternet-explorerangular-dom-sanitizer