What is the best way to assign a different set of sub tabs to each individual tab?

Upon hovering over MTH025-ENG111, I would like it to become visible. Any additional tips or tools you have to assist me with this are greatly appreciated.

<html>
    <head>
        <title> join the club </title>
    </head>
    <body> 
    </body>
    <h1 style="text-align:center"> CLUB </h1>
    <br></br>
    <hr>
    </hr>
    <div style="text-align:center">
            <input type="button": value="men" 
            button onclick= 
                <ul style="list-style-type:dark circle">
                    <li> MTH 025 </li>
                    <li> JPN 101 </li>
                    <li> CSE 102 </li>
                    <li> CEC 101 </li>
                    <li> ENG 111 </li>
                </ul>
            <input type="button": value="women">
            <input type="button": value= "new arrivals">
            <input type="button": value="popular" >
    </div>
</html>

Answer №1

Adjust the transparency of the li elements to 0, then change it to 1 when hovered over.

Give it a try:


<html>

<head>
    <title> Join the Clan </title>

    <style>
        .ul li {
            opacity: 0;
        }

        .ul li:hover {
            opacity: 1;
        }

    </style>

</head>

<body>
<h1 style="text-align:center"> CLAN </h1>
<br></br>
<hr>
</hr>
<div style="text-align:center">
    <input type="button" : value="men">
    <ul class="ul" style="list-style-type:dark circle">
        <li> MTH 025 </li>
        <li> JPN 101 </li>
        <li> CSE 102 </li>
        <li> CEC 101 </li>
        <li> ENG 111 </li>
    </ul>
    <input type="button" : value="women">
    <input type="button" : value="new arrivals">
    <input type="button" : value="popular">

</div>

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

Content fully displayed, excess content cropped

Upon examining the layout of this DOM structure, I noticed a flexbox container with two children. One child has a fixed size, while the other one shrinks with an overflow: hidden. My curiosity lies in finding a way for the content that overflows to remain ...

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

What is the best way to add margins to the elements in a row without disrupting the row layout?

I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here. Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works ...

Is it possible to utilize retina images with CSS3's :before selector?

Can I adjust the size of an image inserted using :before? For example, if I want to use a high resolution image in the content below - how can I specify the dimensions? .buy_tickets_btn:before{ content: url(../images/buttons/pink_ticket_btn_bg.pn ...

The Countdown feature is currently only functioning on the initial button and not on any of the other buttons

I could use some assistance. I have a download button with a countdown, but there seems to be an issue with the button's functionality. It only works on the first button, or if the second button is clicked first, it starts the countdown on the first b ...

Troubleshooting Bootstrap's Margin Problem

Currently, I am delving into the basics of bootstrap and encountering some challenges with using margin-auto. Specifically, I am working on positioning a navbar by using ml-auto to separate it from the brand, pushing the navbar to the right side of the p ...

"Check if the _post variable is set for a two-dimensional array

<button type="submit" name="apply[<?php echo $temp['j_id']; ?>]"> Apply</button> The value of $temp['j_id'] is randomly assigned and unique. I am interested in identifying which specific j_id button was clicked on the ...

I'm currently reviewing a CSS stylesheet for a React webpage, and I've noticed that several classes are utilizing content to dynamically create images. However, the display of content in VSCode appears as a bullet point

Exploring an existing ReactJS website, I've noticed that many images are rendered using the CSS content property. While examining the CSS file in VSCode, I've come across classes where the content is displayed as "". I'm uncertain whether ...

Could Chrome be miscalculating em unit values in media queries?

I have defined my media query breakpoints as shown below: @media screen and (max-width:48em){ /* phone */ } @media screen and (min-width:48.063em){ /* tablet */ } After using a PX to EM calculator to get the 48.063em value (as I was advised to us ...

Aligning a flex container that has wrapping enabled

I need help with displaying a list on the user's screen that can be reordered by drag and drop. Currently, the drag and drop functionality is working fine. However, I want to display the list in multiple columns as sometimes there are too many option ...

Increasing a numerical value in JavaScript

When inputting a prefix of 'A' and a value of 10, the desired result should be A1 to A10. However, in my current code, it is producing the output as 10A1 instead of just A1 to A10. Any assistance with this issue would be greatly appreciated. Apol ...

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

What is the best way to create two responsive thumbnail columns with equal height using bootstrap?

Need help with creating responsive columns similar to a thumbnail carousel, with the image centered at the top border Struggling to figure out how to achieve this using Bootstrap. I have created a mockup in Photoshop and included a link for reference. Any ...

Turn words into smiley faces without having to refresh the page

Recently, I came across an interesting feature on Facebook where text in messages is automatically converted into smiley faces without the need to reload the page. This got me thinking about how I could recreate this same functionality using jQuery and HTM ...

What are the steps for printing a webpage in landscape orientation using Firefox and IE11?

@page { size: 11in 8.5in; } This code snippet did not achieve the desired result in Internet Explorer or Firefox. The transform: rotate(270deg); property only worked for the first page. ...

AngularJS - How to loop through a div to display all items

I am working with AngularJS to create a repeatable shopping cart items feature. Below is a sample JSON data structure: [{"src": "img/T1.jpg", "itemname": "solid green cotton tshirt", "style": "MS13KT1906", "colour": "Blue", "size": "s", "qty": "1", "price ...

Error message: 'html' is not a defined data type in jQuery Ajax

Having some trouble with my jQuery ajax code while working on it in Firebug. I keep getting a ReferenceError: jQuery(document).ready(function() { jQuery('.my-div').click(function(e){ e.preventDefault(); var href = jQuery(this).attr(& ...

Creating personalized email templates with PHPMailer Using PHP to send customized

I am currently in the process of creating an email feature for a client, with a primary focus on ensuring that users remain on the same page in case of any email-related errors. These errors should be displayed on the same page. To achieve this, I have de ...

Top method for eliminating the default IOS date picker

My jQuery datepicker is functioning perfectly on all web browsers, however, I am encountering an issue when viewing it on mobile devices such as the iPad. The default IOS date picker also appears alongside mine. What would be the most effective way to elim ...

Unable to display HTML content on a page using the foreach callback in JavaScript

I have a function that iterates through each element of an array and generates HTML content on the page while updating some properties using elements from the array. I am utilizing forEach to iterate over the elements of the array and innerHTML to display ...