"What's up with this hover script? It seems to be malfunction

I created a hidden div and tried to display it with a hover effect on another div, but it's not working. Here's my code:

<html>
<head> 
<title> Welcome to FreeAppzToday </title>

    <style>


    #home {background: black; width:6%; height:6%; margin-left: -1%; margin-top: -2.2%}
    #home:hover{background-color: #1A49B4}
    #text-home  {font-size:225%; margin-left: 15%; color: white;}
    a {text-decoration: none;}

        #games {background: black; width:6%; height:6%; margin-left: 5%; margin-top: -5.1%;}
        #text-games {font-size:250%; margin-left: 1.5%; color: white;}
        #games:hover {background-color: #1A49B4;}

        #action {background: black; width:6%; height:3%; margin-left: 5%; margin-top: -1.1%;}
        #text-action {font-size:125%; margin-left: 1.5%; color: white;}
        #games:hover, #action {visibility: visible;}
        #action:hover {background-color: #1A49B4;}
        #action {visibility: hidden;}

</style>
</head>
<body>

<div id='home'><a href='index.php'><p id='text-home' >Home</P></a></div>
<div id='games'> <a href='games/index.php'><p id='text-games'>Games</p></a></div>
<div id='action'><a href='games/action.php'><p id='text-action'> Action</p></a></a>
</div>

</body>

</html>
htmlcsshover

Answer №1

There seem to be some issues with your code as certain tags are not closing properly, so I didn't go into detail about it.

Take a look at this simple example for clarification:

http://jsfiddle.net/8mrugaoo/

You will require a container div that, upon hover, will apply visibility:visible to a child element.

<div id='home'>
    <a href='index.php'><p id='text-home' >Home</p></a>
</div>

<div id="games_container">
    <div id='games'>
        <a href='games/index.php'><p id='text-games'>Games</p></a>
    </div>
    <div id='action'>
        <a href='games/action.php'><p id='text-action'> Action</p></a>
    </div>
</div>

Here is where the enchantment occurs:

#action {visibility:hidden;}

#games_container:hover #action {visibility:visible;}

Answer №2

Check out the updated solution from user @Sharky, which now utilizes the sibling selector ~

View Fiddle

CSS:

p {
   margin:0;
   padding:0;
}
div {
   padding:8px;
}

#action {
   visibility:hidden;
}

#action:hover {
   visibility:visible;
}

#games:hover ~ #action {
   visibility:visible;
}

In order to prevent the hiding of the #action link when you mouseout from the #games link, you need to apply the same css to the #action:hover selector. Additionally, since the p element inside the link has a margin, it was necessary to remove it and place it on the parent 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

Generating radio buttons dynamically and automatically selecting the correct button using AngularJS

In the questionnaire form, each question is looped over along with its answers to create radio buttons for each answer. The answer object contains a property called answered, which can be true or false depending on whether the answer has been previously ...

javascripthtmlangularjs

PHP script redirects to its own URL successfully, but the functionality fails when triggered by CRON

I am facing an issue with a program that calls itself iteratively. redirect($_SERVER["PHP_SELF"]); function redirect($url,$seconds=0) { $html="<html><head><meta http-equiv='refresh' content='$seconds; URL=$url'>< ...

phphtmlcron

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

javascriptjqueryhtmlcss

Tips for creating a mirrored iframe without the need to load the URL twice: CSS does not trigger the desired effect

I have a unique requirement for two iframes - I want only the first iframe to load a specific URL. Once the first iframe finishes loading, I need the second iframe to display the same content without actually loading the URL again. Here is the approach I h ...

javascriptjqueryhtmlcssiframe

Combining HTML, CSS, and ASP.NET is a

<table cellspacing="0" cellpadding="0" width="100%" style="background-image: url('/ProjectSample/images/LoginBox.png'); background-repeat: no-repeat;"> Is there something incorrect with the way this style tag is referencing an image with ...

htmlcss

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

javascriptandroidhtmliosswipe

Using Angular to Bind Checkbox Value in Typescript

I have a challenge of creating a quiz where a card is displayed with 4 questions structured like this: <div class="col-md-6"> <div class="option" id="Answer1"> <label class="Answer1"> <input value= "Answer1" type="checkbox ...

htmlcssangulartypescriptundefined

I am facing an issue where the inline CSS is not being applied in my

I recently integrated tcpdf in my CodeIgniter project and encountered an issue with applying inline CSS to td. This is a snippet of my code: <table style="float:left;width:100%; border:1px solid #c2c2c2; margin-top:10px;"> <tr style="float:l ...

htmlcsspdf

The issue of a background image not appearing on Chrome and Firefox has been identified

I am experiencing an issue where a background image is not showing up on Chrome or Firefox, but it displays properly on other browsers. The problem occurs with relative and hard links Substituting the image file works, but the video disappears Adblock is ...

htmlcss

Guide to using Python and Selenium to automate clicking the "Load More" button on the webpage "https://github.com/topics"

With just one click of the load more button, I can uncover a plethora of information and scrape additional HTML content beyond what is initially shown. In this scenario, the task at hand involves navigating to github.com/topics and locating the singular b ...

pythonhtmlseleniumweb-scrapingselenium-edgedriver

What is the best way to limit the number of options displayed in the vue-multiselect

I'm looking to truncate multiple values on the vue-multiselect component. I attempted to override various classes without success, as shown in this example: .multiselect__content-wrapper { overflow-x: hidden; text-overflow: ellipsis; } ...

cssvue.jsvue-multiselect

ExtJS Store proxy failing to update data in users.json file according to tutorial

Currently, I am referring to a tutorial found at this link: My extjs version is 4.2.1. The file path is app/controller/Users.js Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', models: ['User'], stores: [& ...

htmlextjsextjs4.2

Tips for responding to and disabling a specific button in Vuetify.js after clicking the follow or unfollow button

I have a situation where I need to implement a functionality for a series of buttons with follow and unfollow statuses. When a user clicks on any button, I want the status to change after a brief delay and deactivation, followed by reactivation. For instan ...

javascripthtmlvue.jsnuxt.jsvuetify.js

Having trouble establishing a connection with a remote SQL Server using PHP. Getting the error message "Unable to establish connection."

I'm attempting to transfer data from a PHP form to a remote SQL Server database. Upon clicking the submit button, I encounter the following errors: Error: mysqli_query() expects parameter 1 to be mysqli, resource given in C:\wamp64\www&bs ...

phphtmlmysqlsql-serversqlsrv

In this guide, we will explore the process of designing unique styles for ng

What is the proper way to customize CSS for a specific element? &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { border-color: $ng-select-highlight; box-shadow: $ng-select-box-shadow; } } The offi ...

cssangularsass

What is the best way to select and style individual HTML elements using CSS?

Having trouble editing a Validations Form in Ionic 4 with CSS. It seems that only the form elements are targeted after clicking on the form group. Attached below are the form states before and after click. I'm unable to style the form elements before ...

htmlcssangularionic4

iOS users are currently experiencing issues with the embedded playlist feature

Since October 17th, 2013, Embedded Playlists no longer function on iOS devices such as iPad and iPhone. This issue has been confirmed on an iPad2 running iOS6 and an iPhone4s running iOS7, with various playlists. Many others have also experienced the same ...

ioshtmlyoutubeyoutube-apiplaylist

What is the significance of the A tag when parsing a URL?

So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...

javascripthtmldom

Using Three.js to create a distorted texture video effect

Check out the example linked here for reference: In this particular project, there are two cylinders involved - an outer cylinder with an image texture and an inner cylinder with a video texture. Once the second cylinder is created and added to the scene, ...

javascripthtmlthree.jshtml5-video

Struggling to choose between PHP and jQuery for handling GET requests

I've been attempting to pass two variables from an HTML page to a PHP script, but I'm consistently receiving a response in text/html format. Essentially, the entire PHP code is being returned to the console. Here's the jQuery code I'm ...

phpjqueryhtmljsoncontent-type