Attempting to increase the size of the menu text upon hover action

It seems like a basic mistake on my part, but I just can't seem to make it work.

What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only enlarges when you hover over the text itself and not the actual box containing the text.

ul li :hover{
font-size: 30px;
font-family:sans-serif;
}


ul li a{
font-size: 20px;
font-family:sans-serif;
}

Any assistance would be greatly appreciated. Thank you!

htmlcss

Answer №1

To achieve the hover effect on the list items (li), you must use the :hover pseudo-selector immediately after the li and also target the a element. I included a larger line-height to prevent text resizing from affecting the size of the list items.

ul li {
  list-style:none;
  height:30px;
}

ul li a{
  font-size: 20px;
  font-family:sans-serif;
  text-decoration:none;
  line-height:30px;
}

ul li:hover a{
  font-size: 30px;
}
<ul>
  <li><a href = "#">One</a></li>
  <li><a href = "#">Two</a></li>
  <li><a href = "#">Three</a></li>
 </ul>

Answer №2

.navigation {
  border:1px solid #ddd;
  padding:20px;
  display:inline-block;
}

.navigation a {
  font-size:14px;
}

.navigation a:hover {
  font-size:30px;
}


.navbar {
  border:1px solid #ddd;
  padding:20px;
  width:200px;
  height:20px;
}

.navbar a {
  font-size:14px;
}

.navbar a:hover {
  font-size:30px;
}
Box will expand
<br />
<br />
<div class="navigation">
  <a href="#">test</a>
  <a href="#">test 2</a>
</div>



Box will not expand
<br />
<br />
<div class="navbar">
  <a href="#">test</a>
  <a href="#">test 2</a>
</div>

Answer №3

The concept is a bit hazy for me at the moment. However, it seems like you are aiming to create something similar to the following...

ul li{
    border-style:dotted;
    border-width:2px;
    width:100px;
}

ul li a:hover{
    font-size: 25px;
    font-family:serif;
}

ul li a{
    font-size: 18px;
    font-family:serif;
}
<ul style="list-style-type:none;">
    <li><a>Element1</a></li>
    <li><a>Element2</a></li>
    <li><a>Element3</a></li>
</ul>

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 steps to implement an onchange function for displaying image previews in a profile image tag

Within my code, there is a profile image tag along with an input tag for updating the image. I aim to implement a functionality that allows me to select a new image and automatically update the profile picture when it changes <div class="col-sm-6"> ...

javascriptphphtml

Implementing a line break within a JavaScript function specifically designed for formatting images

As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scro ...

javascriptcss

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

For the first time, I am encountering this issue. I am currently attempting to integrate this code into my application http://jsfiddle.net/TC6Gr/119/ My attempts include: Pasting all the jsfiddle code in a new page without my code, but it doesn't w ...

javascriptjqueryhtmlajax

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

I'm trying to use a JavaScript function to trigger the click event of an HTML button when a drop-down list is changed. However, it seems like the correct id is not being found. @using (Ajax.BeginForm("GetReport", "Choices", new AjaxOptions() { ...

javascriptjqueryhtmlasp.netasp.net-mvc

The presence of Null is detected during the HTML parsing process

I'm in the process of developing dynamic HTML pages using JSON data. Each time the application encounters a special identifier like #@, it gets replaced by a specific value. However, upon loading my page, I noticed that a null is being printed at the ...

androidhtmlnullandroid-webview

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

jqueryhtmlcsscss-animations

Issue with jQuery in Internet Explorer causing difficulties loading images

I'm experiencing an issue with my website where all the images load on top of each other when the site is first loaded, creating a chaotic mess. The desired functionality is for the images to remain invisible until specific words are clicked, which is ...

javascripthtmlimage

What is the best way to choose elements that are not followed by a specific element?

My HTML structure consists of repeating pairs of img and p tags. Often, the img tag is missing from the sequence. <img> <p></p> <img> <p></p> <img> <p></p> <p></p> <p></p> <i ...

csscss-selectors

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

javascriptjqueryhtmljsonobject

Using jQuery and HTML to create numerous links that direct to a solitary iframe

I created a basic overlay setup using css, html, and jQuery. Here's how it looks: <a class="activator" id="activator" style="" href="#">hello</a> <div class="overlay" id="overlay" style="display:none;"></div> <div style="d ...

jquerycsshtmljquery-ui

Incorporating HTML5 Video Using an AJAX Request

I am attempting to fetch a video using an ajax query, but it seems that the video player control buttons are missing. Here is the code I am using: $.ajax({ context: document.body, url: "/?get=json&act=video", type: "get", success: fu ...

javascriptjqueryajaxhtmlhtml5-video

Some web browsers do not support video html5, except for Google Chrome

Not all browsers support HTML5 video, with the exception of Google Chrome. In Firefox, there may be a message saying "No video with supported format and MIME type found." To embed a video in your page, you can use the following code: <video width="3 ...

htmlvideo

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

javascripthtmlcssimage

Experiencing varying top offsets on initial click followed by consistent offsets on subsequent clicks

The first image shows jquery(document).height() and the second image shows offset().top. I am attempting to scroll to an element with a fixed header, but on the first click I get a different value for offset().top than on the second click. It seems that th ...

htmljquerywebheightoffset

In a carousel slider, the height and width of divs are not set to specific dimensions

For a code snippet, you can visit this link: here The html: <html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet"> <link href="https://ma ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with CSS Locator identifying an element in your Protractor Test?

In the Protractor test snippet below, I am attempting to calculate the quantity of div elements using the CSS locator: let list = element.all(by.css('div[class="ag-header-cell ag-header-cell-sortable"]')); expect(list.count()).toBe(11); ...

cssangularjasmineprotractor

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

javascriptjqueryhtmlmenu

Center align a font-awesome icon vertically next to a paragraph of text

Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon? I've tried various code snippets but haven't found a solution yet. ...

htmlcss

Tips on incorporating additional spacing between columns in Bootstrap 4

Is there a way to increase the distance between these two columns? <div class="row "> <div class="col-md-6 shadow"> ... </div> <div class="col-md-6 shadow "> ... </div> </div> ...

cssbootstrap-4

Clicking on a link initiates the dropdown menu for selecting an option

This project is specifically designed for mobile use, so there's no need to worry about how it will appear on desktop screens. In this project, I have an "a href" with an icon next to it that simulates a button. When a user clicks on it, a dropdown me ...

javascriptjqueryhtml