Hover over to see the impressive special effect produced by Scriptaculous Effect.Appear

Having an issue with using scriptaculous Effect.Appear() as a menu option. I'm trying to create a flash-like menu using pure css and scriptaculous.

I've managed to achieve the desired outcome where hovering over a box triggers a text (with display: none;) to appear above it, while the box changes height and background color. However, the problem arises when moving the mouse quickly and erratically over the box - the text remains visible as if it was selected.

What I aim for is to have the text appear on hover and disappear when the mouse moves out of the area.

Here are my codes:

function ShowEffect(element){
   new Effect.Appear(element, 
   {duration:0.3, from:0, to:1.0, queue: 'front'});
}
function HideEffect(element){
   new Effect.Appear(element, 
   {duration:0.2, from:1.0, to:0, queue: 'end'});
}

The Divs:

<div class="lefty" style="width: 90px; margin-right: 2px;">
                <div style="display: none;" id="clicker2text">ABOUT US</div>
                <div style="width: 90px;" onmouseover="ShowEffect('clicker2text')" onmouseout="HideEffect('clicker2text')"></div>
                </div>

Any assistance would be highly appreciated :)

cssscriptaculous

Answer №1

Try using event observers instead of the onmouseover attribute on the div, like this:

$$('.lefty').invoke('observe','mouseover',ShowEffect);
$$('.lefty').invoke('observe','mouseout',HideEffect);

You might find it more effective to watch for events bubbling up to the body and then take action accordingly if it's the right element.

$$('body').first().observe('mouseover',function(e){
    if(e.findElement().hasClass('lefty'))
    {
        ShowEffect(e.findElement());
    }
    else
    {
        // Ensure all menus are hidden instead of stuck on
        $$('.lefty').each(function(element){
            if(element.visible())
            {
                HideEffect();
            }
        });
    }
});

Give this a try and see if it offers a solution to your issue.

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

What is the method to restrict the coverage of the background color within a specific region in HTML?

I am still fairly new to html so I apologize if this is a very basic question for you. Here is the css file that is causing me trouble: .sidepanel-list{ margin-left: 10px; background-color:lightgray; Whenever I run the code, the background color s ...

htmlcss

Tips for handling the !important declaration when creating a customized bootstrap theme

Exploring the Color Dilemma After creating a simple website in Bootstrap 4.1 with a distinct shade of purple, I encountered an issue with specificity when it came to customizing button states. To address this, I introduced a CSS class called .btn-purple ...

htmlcssbootstrap-4css-selectors

Displaying elements above my React sidebar

I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...

javascriptcssreactjs

Craft a search bar inspired by Google's iconic design using CSS styling

I need to recreate a custom input styled like the Google Material Theme design. This is the desired outcome: https://i.stack.imgur.com/QU5dp.png While I am aware that frameworks/libraries can achieve this, it is part of my assignment to create it from s ...

htmlcssmaterial-design

Chrome and Firefox browsers are not supporting HTML simple anchor links

Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...

htmlcssanchor

Unable to Scroll HTML Division

At the moment, I am working on a new website. I have a div where I place images and overlay text on them to describe the images. The issue I am facing is that the text does not scroll even though the scroll bar is visible. This is my HTML: <!DOCTY ...

htmlcss

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

Using jQuery for Background Image Position: $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { $(".class").addClass("bgposi"); // $(".top").addClass("fixd"); // $(".logo").addClass ...

javascriptjquerycss

Can the color of the expanded navigation bar in Bootstrap 4 be customized?

I'm currently in the process of developing a Bootstrap website and was wondering whether it is feasible to add a background color to the expanded navbar specifically on small screens. Feel free to refer to the images below for a visual representation ...

htmlcssbootstrap-4

Modifying app aesthetics on-the-fly in Angular

I am currently working on implementing various color schemes to customize our app, and I want Angular to dynamically apply one based on user preferences. In our scenario, the UI will be accessed by multiple clients, each with their own preferred color sch ...

javascriptcssangulartypescriptsass

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Press the button to automatically scroll to a designated div section

One of the challenges I'm facing involves a fixed menu and content box (div) on a webpage. Whenever I click on the menu, the content box should scroll to a specific div. Initially, everything was working fine. Here is a sample of it in action: http ...

javascriptjqueryhtmlcss

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

htmlcssangularjstext-alignment

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

cssreactjsmaterial-uistyled-components

Why is it that consolidating all my jQuery plugins into one file is ineffective?

Prior to this, I included the following scripts: <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script> <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script&g ...

javascriptjquerycssdjangotemplates

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

javascriptjqueryarraysajaxcss

Angular implementation of a dynamic vertical full page slider similar to the one seen on www.tumblr

I'm determined to add a full-page slider to the homepage of my Angular 1.x app After testing multiple libraries, I haven't had much luck. The instructions seem incomplete and there are some bugs present. These are the libraries I've experi ...

javascripthtmlcssangularjsfullpage.js

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Incorporating the jssor nearby slider to create a nearly fullscreen display. The goal is to set the opacity of upcoming images to 0.25 when they are not in the main viewport, giving the edges of the upcoming and previous slides a slight transparency. < ...

javascriptjqueryhtmlcssjssor

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

javascripthtmlcssgoogle-chromecaching

Styling an input text using CSS and Jquery without relying on a parent

Styling CSS input text without a parent div Hello everyone, I am looking to remove the <div id="input_container"> from the code below. Is it possible to achieve the same result without that surrounding div? Check out the jsfiddle: http://jsfiddle.n ...

jqueryhtmlcss