Increasing a hyperlink to the surrounding container

I am currently working on a design that involves a button with multiple options. Here is the CSS code for the button:

.menu-main-window {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0px;
    right: 0px;
    font-size: 0;
}
.btn-tlm:hover .tlm-options {
    display: table;
}
.btn-tlm:hover .menu-text {
    display: none;
}
.tlm-options {
    height: 100%;
    position: absolute;
    display: none;
    top:0;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    color: #0089c8;
    border-radius: 20px;
    transition: all 250ms ease-in-out;
}
.tlm-options div {
    display: table-row;
    font-size: 12px;
    border-bottom: 1px solid #0089c8;
    color: black;
    transition: all 250ms ease-in-out;
}
.tlm-options div:last-child div {
    border-bottom: none;
}
.tlm-options div div {
    display: table-cell;
    vertical-align: middle;
}
.tlm-options div div a:hover {
    text-decoration: none;
}
.tlm-options div div a:visited {
    color: inherit;
}
.tlm-options div:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: NewJuneBold;
}
.menu-btn {
    /* Repeat styles from original code */
}                       

<div class="menu-main-window">
    <div class="menu-item-div-top">
        <div class="menu-btn btn-tlm" style="background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png'); background-size: cover;">
            <div class="menu-text">MENU</div>
            <div class="tlm-options">
                <div>
                    <div> <a href="../somewhere">Option1</a>

                    </div>
                </div>
                  
                 /* Reproduce this block of codes for Option2 to Option4 */ 
                <div>
                    <div> <a href="../somewhere">Option4</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

My goal is to make the entire area of each option a clickable link when hovering over them. How can I achieve this functionality?

htmlcss

Answer №1

The answer to your question can be found below:

- Simply remove the table-cell div from your code

- Change your anchor "A" to display as table-cell, and it should work correctly. The entire area will now be clickable.

/* CSS Code */
.menu-main-window {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0px;
    right: 0px;
    font-size: 0;
}
.btn-tlm:hover .tlm-options {
    display: table;
}
/* More CSS styles here... */

Answer №2

Make sure to set the height and width to 100%, and adjust the line height according to the parent's height.

.tlm-options div > a {
     display: inline-block;
     width: 100%;
     height: 100%;
     line-height: 100px; /* Should match the height of .tlm-options div div */
 }

.menu-main-window {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0px;
    right: 0px;
    font-size: 0;
}
.btn-tlm:hover .tlm-options {
    display: table;
}
.btn-tlm:hover .menu-text {
    display: none;
}
.tlm-options {
    height: 100%;
    position: absolute;
    display: none;
    top:0;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    color: #0089c8;
    border-radius: 20px;
    transition: all 250ms ease-in-out;
}
.tlm-options div {
    display: table-row;
    font-size: 12px;
    border-bottom: 1px solid #0089c8;
    color: black;
    transition: all 250ms ease-in-out;
}
.tlm-options div:last-child div {
    border-bottom: none;
}
.tlm-options div div {
    display: table-cell;
    vertical-align: middle;
    height: 100px
}
.tlm-options div div a:hover {
    text-decoration: none;
}
.tlm-options div div a:visited {
    color: inherit;
}
.tlm-options div:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: NewJuneBold;
}
.menu-btn {
    width: 90%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: auto;
    border-radius: 20px;
    border: 3px solid White;
    box-sizing: border-box;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 100ms linear;
}
.menu-btn:hover {
    border: 3px solid #0089c8;
    /* Azul Ascendi */
    transition: border 250ms ease-in-out;
}
.menu-btn:hover .menu-text {
    background-color: rgba(255, 255, 255, .8);
    color: black;
    transition: all 250ms ease-in-out;
}
.menu-item-div-top {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
}
<div class="menu-main-window">
    <div class="menu-item-div-top">
        <div class="menu-btn btn-tlm" style="background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png'); background-size: cover;">
            <div class="menu-text">MENU</div>
            <div class="tlm-options">
                <div>
                    <div> <a href="../somewhere">Option1</a>

                    </div>
                </div>
                <div>
                    <div> <a href="../somewhere">Option2</a>

                    </div>
                </div>
                <div>
                    <div> <a href="../somewhere">Option3</a>

                    </div>
                </div>
                <div>
                    <div> <a href="../somewhere">Option4</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Check out the full display on Fiddle

Answer №3

Alter the arrangement of the <a> and <div> instead of:

<div> <a href="../somewhere">Option4</a>

                    </div>

revise to:

<a href="../somewhere"><div> Option4</div></a>

and adjust the styling with CSS

Answer №4

To transform the links, change their display property to either inline-block or block and set their height and width to 100%.

.tlm-options div > div > a {
     display: block;
     width: 100%;
     height: 100%;
 }

Answer №5

Change the links to block-level elements:

.tlm-options a {
    display: block;
}

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

Changing CSS module variables through JavaScript programming

I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files. Below is my colors.css file: :root { /* Status colors */ --error ...

csspostcsscss-modulesreact-css-modulesreact-boilerplate

Store the show/not show status of the collapse item-1 class using either local storage or session storage

Having trouble maintaining the state of my collapsible items after a page refresh. I'm using bootstrap 5. To keep the accordion item open, you need to add show to the class. <div role="tabpanel" data-bs-parent="#accordion-1" cla ...

htmljquerybootstrap-5

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

javascripthtml

Display/Conceal the UL subelement when selected

I've been struggling to toggle the visibility of some ul checkboxes when their parent is clicked. Despite my best efforts, I just can't seem to make it work! Could someone lend a hand in getting this functionality working? Essentially, I need th ...

javascriptjqueryhtmlwordpresscheckbox

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I need to ensure that the Online Users div always remains at a fixed size of 200px, while allowing the chat window next to it to resize dynamically based on available space. Essentially, I want the chat window to adjust its width as the window is resized, ...

javascripthtmlcss

Transferring a PHP session variable to JavaScript in a separate file

I successfully imported data from a CSV file into PHP and organized it into a nested array. To ensure the data is easily accessible across different files, I stored the array as a session variable. Now, the challenge lies in accessing this session variable ...

javascriptphphtmlsession

The submission function in document.forms is causing my webpage to freeze

I have been working on a website to manage an SQL table and I encountered a situation where I needed to reload the page with new variables. To achieve this, I created a form named "rerouter" with hidden textareas and set the action to the current page (in ...

javascriptphphtmlforms

Align a flex item in the center horizontally, even when neighboring items are different sizes

In a section element, I have 3 divs inside, and I am trying to horizontally center 'div 2'. The issue I am facing is that the adjacent divs are not the same size, so using "justify-content:center" is not effective. I came across a solution here ...

htmlcssflexbox

What is the method for establishing xpath for non-sequential words within a single attribute?

There is a single tag present : <span class="abc pqr and xyz"> I am looking to locate this specific tag in the DOM using xpath. I have attempted the following: //span[contains(@class,'abc pqr')]..... The term 'and' in the cla ...

htmldomxpathselenium-webdriver

Using the HtmlTable Control to populate data from an HtmlTable object in ASP/C# Programming

It seems like a simple question, but I'm struggling to populate an HtmlTable control, accessible from codebehind, with data from an HtmlTable object already containing information. Could someone offer me guidance on this issue? Thank you in advance. ...

c#asp.nethtml

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss

Displaying the following item in the array when clicking a button in a modal

Hey there! I'm trying to display a new quiz question in a modal when the next button is clicked. I'm new to angular 2 so I might be missing some basic elements. I know that I can access the questions from the html because I have shown them in oth ...

htmlangular

Guide to redirecting traffic from one domain to another while preserving the path component

I am looking to create a redirection from one subdomain to another while keeping the same path intact. I am using a blogging platform and do not have access to a server, but I can modify the global head section of my blog. Currently, I am able to redirec ...

htmlhttp-redirectblogstumblr

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

Tips for navigating the HTML DOM without using window.scrollBy(x, y) (specifically for scrolling within an element)

Desiring to scroll down along with my selected document, I experimented with the following code. window.scrollTo(x, y); const body = document.getElementsByClassName("body")[0]; body.scrollTo(x, y); However, there are instances where it returns "undefined ...

javascripthtmlcssseleniumdom

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

htmlcsslayout

Javascript code experiences a shift in two different styles within a single conditional statement

I'm new to web design and I'm having trouble getting this code to work properly. Can anyone help me fix it so that both styles are applied correctly? // Access the sign_up modal window var modal = document.getElementById('id01'); // A ...

javascripthtmlcss

I'm looking for a CSS layout that can change the order of columns in a row stack for desktop view. Can anyone help me with this? (refer to

I am struggling with arranging elements in HTML and CSS. As a beginner, I am faced with the challenge of ordering desktop and mobile layouts differently. The current code I am using looks like this: <div class="row "> <div class=&quo ...

htmlcsslayoutbootstrap-4

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

When multiple checkboxes are selected, the corresponding form fields will be automatically filled with shared information

When the user checks multiple checkboxes, corresponding form fields should appear based on the checkboxes selected. For example, if the user checks both the flight and hotel checkboxes, the fields for full name and last name should be displayed, while othe ...

javascripthtmlcss