reveal a segment on hover over text blocks

I am struggling with making a section visible on mouseover when it has the display:none property. I want it to become visible when I hover over certain paragraphs. Here is the CSS code snippet:

.buttons {
  width: 97px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background-image: url("/res/downArrow.png");
  background-repeat: no-repeat;
  background-position: right;
}
.buttons:hover > .label {
  background-color: #fff;
  color: #000;
  background-image: url("/res/upArrow.png");
  cursor: pointer;
  visibility: visible;
}
.label {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 35px;
  background-color: #fff;
  border-bottom: solid 3px #3f84f2;
  display: none;
}
<section class="header">
  <div class="menu left">
    <div class="logo left"></div>
    <p class="buttons left">REVIEWS</p>
    <p class="buttons left">FEATURES</p>
    <p class="buttons left">GUIDES</p>
    <p class="buttons left">VIDEOS</p>
    <p class="buttons left">GALLERIES</p>
    <p class="buttons left">FORUMS</p>
    <p class="buttons left">EVENTS</p>
    <div class="left">
      <input type="text" value="Search Products & Articles" />
    </div>
    <div class="login-icon right"></div>
  </div>
</section>

<section class="label"></section>

To see an example of this in action, please visit the following website: http://www.engadget.com/. Thank you!

htmlcss

Answer №1

To achieve this effect using CSS, you will need to move the .label element into the same container as your .buttons. CSS does not have a parent selector to traverse the DOM like JavaScript, so the elements must be either siblings or descendants:

<section class="header">
        <div class="menu left">
            <div class="logo left"></div>
            <p class="buttons left">REVIEWS</p>
            <p class="buttons left">FEATURES</p>
            <p class="buttons left">GUIDES</p>
            <p class="buttons left">VIDEOS</p>
            <p class="buttons left">GALLERIES</p>
            <p class="buttons left">FORUMS</p>
            <p class="buttons left">EVENTS</p>
            <div class="left">
                <input type="text" value="Search Products & Articles" />
            </div>
            <div class="login-icon right"></div>
            <section class="label">SHOW THE TEXT</section>
    </div>
    </section>

In addition, if you are using display: none on label but calling visibility:visible on hover, you need to use a different display property other than hidden:

.buttons:hover ~ .label{ //target sibling 
   background-color: #fff;
   color: #000;
   background-image: url("/res/upArrow.png");
   cursor: pointer;
   display:block; //add
}

FIDDLE

If you prefer to achieve this with your existing HTML structure, you can easily use the .hover() function in jQuery:

$(".buttons").hover(function(){

    $(".label").toggle();

});

JS EXAMPLE

Answer №2

To ensure proper hiding of elements, it is recommended to use display:block; instead of visibility when using display:none:

.buttons:hover ~ .label{/*used ~ instead of > to refer nextAll siblings*/
    background-color: #fff;
    color: #000;
    background-image: url("/res/upArrow.png");
    cursor: pointer;
    display: block;
}

If you have utilized visibility:hidden for label, then only visibility:visible is required in .buttons:hover > .label

In addition, the HTML structure should be similar to this:

<section class="header">
  <div class="menu left">
    <div class="logo left"></div>
    <p class="buttons left">REVIEWS</p>
    <p class="buttons left">FEATURES</p>
    <p class="buttons left">GUIDES</p>
    <p class="buttons left">VIDEOS</p>
    <p class="buttons left">GALLERIES</p>
    <p class="buttons left">FORUMS</p>
    <p class="buttons left">EVENTS</p>
    <div class="left">
      <input type="text" value="Search Products & Articles" />
    </div>
    <div class="login-icon right"></div>
  </div>
  <div class="label"></div>
</section>

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

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

javascripthtmlajax

Begin the text movement from the left position, but shift it towards the right

If I have a table width of 100 pixels, I want to create a marquee effect where the text scrolls from right to left starting at 0 pixel position on the left side. The code below currently starts the text from the 100th pixel and moves from right to left: ...

javascripthtmlcss

Steps to make a div that perfectly matches the size of the image inside, ensuring responsiveness

Currently, I am in the process of creating a mobile e-mail template without the use of JavaScript. The main requirement is for the template to be responsive. My goal is to insert multiple images in a row, with the ability for the images to scale down when ...

htmlcssimageresponsive-images

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

javascriptjqueryhtmlcordova

Tips on activating the overlay solely on the image without affecting the entire column

Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...

htmlcssbootstrap-5

Opening an Accordion programmatically in an Angular 4 application

I am currently developing an Angular 4 application where I have implemented the same accordion feature in two different components. My goal is to allow the user to click on an accordion in the first component and then pass the selected index to the second ...

htmlangulartypescriptbootstrap-4

website with a horizontal scroll-bar

Looking to create a horizontal scrolling website where the divs float to the right without specifying the container's width, as it may vary on different pages. Any suggestions? ...

htmlcss

Adjustable background image with no need for a scroll bar

I am looking to create a static webpage that remains fullscreen without any scrolling. My goal is to have a centered form with the background image adjusting to the window size. As a beginner, I apologize if this request seems too simple. .container { ...

htmlcssimagescrollbackground

Problem arising from implementing background and relative positioning in html and css

Encountering an issue with html and css. Today, attempted to create a page with a large background image for the first time. Utilizing the foundation framework, but facing a challenge. Foundation is an adaptive framework, and when resizing the browser, a ...

htmlcss

Retrieving the ID of a clicked button in React

I have a situation where I have 5 unique clickable links, each with their own distinct ID. My goal is to capture the specific ID of the link that was clicked. So far, I've experimented with two different methods but unfortunately, neither one has work ...

javascripthtmlreactjsonclick

Issues are arising with CSS .not(selector) functionality when applied to a span element

One of the challenges I'm facing is formatting a header with a span tag that contains a date and some accompanying text. The goal is to make the text bold without affecting the formatting of the date. In my CSS file, I have tried using :not(cls) to t ...

htmlcss

Utilize BootStrap framework to embed Twitch player, ensuring it fills the entire width of its parent element

I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...

htmlcssbootstrap-4twitch

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here a ...

javascriptjqueryhtmlcssbootstrap-4

Get the file in Safari web browsers

Looking for a solution to download media files (mp3, mp4) supported by the Safari browser? I attempted using the HTML5 download attribute but found it only works on Chrome and IE. Any suggestions for an HTML or JavaScript code that would work instead? ...

javascripthtml

How can the value of a button be displayed in an input box using an onclick function?

When the button '1' is clicked, it displays the value "1" inside a <!p> tag. However, the second button '2' does not display the value "2" in the input box. Even though both functions are identical. //Function with working func ...

javascripthtmlbuttoninputcalculator

Declaring a Javascript variable within an if statement does not alter the value of the global variable

Currently, I am working on enhancing my HTML projects by using JavaScript to modify the video source. Below is the video element in question. <div> <video id="songVid" onmouseover="controlsVid()"> <source src=&qu ...

javascripthtml

What steps can be taken to enable automatic playback for this slider?

After downloading the slider from this site, I've been attempting to enable autoplay on this slider but have not had any success. Can anyone provide guidance on how I can achieve this? I've tried modifying the code below without achieving the des ...

javascriptjqueryhtmlcss

The background banner is failing to display within the divbox

Having some trouble with my top banner in the HTML and CSS code I'm using to create a master page for ASP.NET. Oddly, the banner does show up on the design tab in Visual Studio, but it's not displaying properly. Here's the relevant code, can ...

asp.netcssimagehtml

Is it possible to retrieve all website links from a page in plain text format?

I am looking to extract all URLs from a web page, regardless of whether they are clickable links or not. For instance, the page source could look like this: <html> <title>Random Website I am Crawling</title> <body> Click <a ...

phphtmlregexstringweb-crawler