Increase the size of the class element when hovered over

I have assigned a class to the "next" and "previous" functions on my webpage, and I am interested in increasing their size on hover so that they take up more space and push the other elements aside. For example:

When I hover over the NEXT button, I want it to expand in size, thereby shifting the back and top buttons to make room.

I'm not sure if this can be achieved with a class rather than an id. I attempted using .next:hover{width:120%}, but it did not produce the desired effect.

Below is the relevant code snippet:

#pager{
    width:100%;
    height:50px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
}

#pagination{
    margin:auto;
    width:572px;
    height:30px;
    text-align:center;
}

.pagicon, .next{
    display:inline;
}

.pagicon a, .next{
    font-size:11px;
    padding:5px;
    margin:5px;
    color:{color:Pagination};
    background:{color:Pagination background};
    border-radius:{text:Border radius};
}

.pagicon a:hover, .next:hover{
    cursor:pointer;
    color:{color:Bold};
    background:{color:Hover};  
}

.pagicon i, .next i{
    color:{color:Icon};
    font-size:15px;
    margin:5px;
    text-decoration:none;
}

.pagicon:hover i, .next:hover i{
    color:{color:Bold};
}

(In the live website, there are boxes around the buttons)

Thank you!

htmlcsshovercss-transitions

Answer №1

I have successfully implemented this functionality using JavaScript. Below is the code snippet where I have utilized the onmouseover and onmouseout events to change the font size on hover. The current font size is set to 70px.

function increaseFontSize(elementId) {
  document.getElementById(elementId).style.fontSize = "70px";
}

function resetFontSize(elementId) {
  document.getElementById(elementId).style.fontSize = "1em";
}
#pager {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

#pagination {
  margin: auto;
  width: 572px;
  height: 30px;
  text-align: center;
}

.pagicon,
.next {
  display: inline;
}

.pagicon a,
.next {
  font-size: 11px;
  padding: 5px;
  margin: 5px;
  color: {
    Color: Pagination
  }
  ;
  background: {
    Color: Pagination Background
  }
  ;
  border-radius: {
    Text: Border Radius
  }
  ;
}

.pagicon a:hover,
.next:hover {
  cursor: pointer;
  color: {
    Color: Bold
  }
  ;
  background: {
    Color: Hover
  }
  ;
}

.pagicon i,
.next i {
  color: {
    Color: Icon
  }
  ;
  font-size:15px;
  margin:5px;
  text-decoration:none;
}

.pagicon:hover i,
.next:hover i {
  color: {
    Color: Bold
  }
  ;
}
<div id="pager">

  <div id="pagination">
    <span class="pagicon">
<a href="{PreviousPage}" id ="back" onmouseover="increaseFontSize('back')" onmouseout="resetFontSize('back')"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> BACK </a>
</span>

    <span class="pagicon">
<a href="#" id="top" onmouseover="increaseFontSize('top')" onmouseout="resetFontSize('top')"><i class="fa fa-long-arrow-up" aria-hidden="true"></i> TOP </a>
</span>


    <a class="next" id="next" href="{NextPage}" onmouseover="increaseFontSize('next')" onmouseout="resetFontSize('next')"> NEXT <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
  </div>

</div>

If this solution works for you, please mark it as the answer. Thank you!

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

Identifying and detecting Label IDs when clicked using the for tag

I am facing an issue with labels and input fields in my code. I have multiple labels that trigger the same input field, but I want to know which specific label triggered the input field. <label id="label1" for="input1">Document1</label> <la ...

javascriptjqueryhtml

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Issues arise when attempting to implement a basic quiz using jQuery or JavaScript

I’ve created a quick quiz to determine how many correct answers a person gets when they click the 'submit' button. However, it keeps showing zero as the result. Can someone please assist me? $(document).ready(function(){ $('button' ...

javascriptjqueryhtml

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

I am considering using an HTML WYSIWYG editor like CKEditor, but I am concerned about the possibility of users submitting HTML code that could alter the layout of the page when rendered. Here is a comparison between two posts: <p><b>This is m ...

javascriptphpjqueryhtmlckeditor

Is it possible to loop through a directory containing images and dynamically generate a CSS rule that positions each image based on its

I'm not very familiar with PHP so I could use your expertise in coming up with the most efficient and straightforward solution for this specific task. In my directory "path/images/headers," I have multiple header images all cut to the correct size, ea ...

phpcssimage

Issues with the Webdriver MoveToElement function have been reported in Internet Explorer and Firefox specifically related to retrieving text tooltips

I have attempted to use MoveToElement in order to retrieve the tooltip of a specific element. This method works successfully in Chrome. However, when I try to do the same in IE10 and Firefox 26.0, it only hovers over the element for a brief moment, not all ...

c#seleniumbuildhoveraction

How can I rearrange the button order in a Bootstrap table?

I'm having trouble getting this attribute to work in the table tag data-buttons-order=['paginationSwitch','refresh','toggle','fullscreen','column'] ...

jquerycsstwitter-bootstrap

Generate visual content from written text with the use of a form and store it on the

Struggling to implement a php function on my webpage that generates an image from text input. However, nothing appears to be happening when I execute the code: PHP - $to = $paths. '/card.png'; if (isset($_POST['make_pic'])) { $text = ...

phphtmlajaxformsimage

Tips for aligning content vertically within a header:

I'm currently working on creating a responsive header with two columns. My goal is to have the button in the right column vertically centered. I am aware of the method for centering items using 'top: 50%; margin-top: -xy px', but my button ...

htmlcss

Browsing through tabs to locate specific text

Currently, I am developing a feature for a Chrome extension and I could use some assistance in debugging. The feature involves retrieving a user's input as a string from a text box on popup.html and then scanning through all the open tabs in the curr ...

javascriptjqueryhtmlgoogle-chrome-extension

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

javascriptjquerycssscroll

Hover over the Div element for inline effect

Hello all, I am currently working on running a while loop from a database to show different records. The twist is that these records are displayed as images, which makes it tricky to customize using standard CSS. To work around this, I'm implementing ...

phphtmlcss

Organize pictures and words side by side on both sides at the same time

I am currently facing an issue while trying to load images and quotes vertically on the left and right side of the page. The problem arises with the 3rd image and quote due to an unexpected margin in the CSS code. Despite my efforts, I have not been able t ...

htmlcss

The absence of button.onclick=func in the HTML code is notable

I am facing an issue where adding an onclick attribute to an input element via JavaScript does not display in the HTML, but the function gets executed. On the other hand, when I add the input element directly in the HTML code, the onclick attribute shows u ...

javascriptjqueryhtml

Picture placed outside div within infobubble

I'm currently working with Google Maps to display an InfoWindow using the InfoBubble library. The issue I'm encountering is that when I try to show an image outside of a div using CSS properties, only half of the image displays within the div. B ...

htmlcssgoogle-maps-api-3infowindowinfobubble

Challenges with uploading files using jQuery

Click here to upload a file I'm trying to create a feature where users can choose an image and have it displayed in place of the "trees" image. Feeling stuck, I could really use some guidance. Check out the code below: <div class="user-editab ...

phpjqueryhtmlcssupload

Exploring jQuery's parent selector for traversing the DOM

I am currently working with an array that inserts articles into my website. I have a specific requirement where, upon clicking the title (h3), I need to display more information based on the article's index. To achieve this, I believe I should travers ...

javascriptjqueryhtml

Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive. However, one major issue I've ...

htmlcssrubyflexboxhaml

Expand Menu Options (jQuery)

Currently facing a jQuery problem that I can't seem to figure out. I've set up a menu with submenu elements and want to toggle the content height by clicking on menu items. The issue arises when clicking on another item causes the content to coll ...

javascriptjqueryhtmlshopify

Bootstrap dropdown menu fails to adapt to updated navbar height

I recently made a modification to the navbar size on my website, increasing it from 50px to 63px by tweaking a line in the bootstrap.css file. The exact code snippet I utilized for this adjustment is as follows: .navbar { position: relative; min ...

htmlcsstwitter-bootstraptwitter-bootstrap-3