Unable to activate mouseover feature

Attempting to use mouseenter to display a class:

$(".stcommenttext").live({
    mouseenter:
        function() {
            $(this).attr('class');
       },
    mouseleave:
       function() {
       }
   }
);

Here is the corresponding HTML and CSS:

<div class="stcommentbody" id='stcommentbody19'>

        <div class="stcommentimg">
            <a href="/view_profile.php?id=5" style="border:0;"><img src="/photos/files/5/main/small_thumb.jpg?v=1348065832" class='small_face'/></a>
        </div>

        <div class="stcommenttext">
            <input type="hidden" id="home19" value="1" />
            <a class="stcommentdelete" href="#" id="cmt_19" rel="tooltip" title="Delete Comment"></a>                    
            <a href="/view_profile.php?id=5" style="border:0;"><b>psmith</b></a>  hello             <div class="stcommenttime">8 minutes ago <span style="float:right;"><img id="delcmticon_69" class="saving" src="/images/busy.gif" /></span></div> 
        </div>
    </div>
    <div class="stcommentbody" id='stcommentbody20'>

        <div class="stcommentimg">
            <a href="/view_profile.php?id=5" style="border:0;"><img src="/photos/files/5/main/small_thumb.jpg?v=1348065832" class='small_face'/></a>
        </div>

        <div class="stcommenttext">
            <input type="hidden" id="home20" value="1" />
            <a class="stcommentdelete" href="#" id="cmt_20" rel="tooltip" title="Delete Comment"></a>                    
            <a href="/view_profile.php?id=5" style="border:0;"><b>psmith</b></a>  testing this              <div class="stcommenttime">7 minutes ago <span style="float:right;"><img id="delcmticon_69" class="saving" src="/images/busy.gif" /></span></div> 
        </div>
    </div>
</div>

CSS:

.stcommentdelete {
    float:right;
    cursor:pointer;
    background:url(/wall/icons/trashdull.png);
    display: none;
    height:20px;
    width:20px;
}
.stbody:hover .stcommentdelete {
    display: block;
}
.stcommentdelete:hover {
    background:url(/wall/icons/trash.png);
}

Expectation was for delete icon to appear only on mouseenter, but it appears for all divs. Any insights on what might be missing?

javascriptjquerycss

Answer №1

$(".stcommenttext").hover(
    function() {
        $(this).toggleClass('stcommentdelete');
    },
    function() {
        $(this).removeClass('stcommentdelete');
    }
);

Answer №2

Is it possible to display the .stcommentdelete element only when hovering over the .stcommentbody elements?

$('.stcommentbody').hover(function() {
    $(this).find('.stcommentdelete').show();
}, function() {
    $(this).find('.stcommentdelete').hide();
});

Answer №3

Starting from jQuery version 1.7, the .live() method has been deprecated. Check out live
you can opt for using .on() instead of .live() or utilize .mouseover and .mouseleave separately like shown below. 

$(".stcommenttext").mouseenter(function(){
   $(this).addClass('class');
}).mouseleave(function(){
   $(this).removeClass('class');
});

Refer to mouseenter

Answer №4

To incorporate multiple functions for mouseenter and mouseleave events using the .hover method, follow this example:

$(".stcommentbody").hover(
    function() {
        $(this).find(".stcommentdelete").addClass('stcommentdelete-active');
    }, function() {
        $(this).find(".stcommentdelete").removeClass('stcommentdelete-active');
    }
);​

Check out the live demonstration here: http://jsfiddle.net/SO_AMK/Vg2vZ/ (The markup used in this demo includes different images)

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

How can I effectively update Bootstrap 4 in a Rails environment?

After attempting to update my Rails 5 project from Bootstrap 4 Alpha 6 to the final version 4.0.0, I confirmed that the v4.0.0 gem was installed (with the alpha version gem uninstalled). However, upon running my project in development mode, I discovered th ...

cssruby-on-railstwitter-bootstrapruby-on-rails-5twitter-bootstrap-4

Can someone point out the mistakes in my CSS Layout?

I've been struggling to make progress on this task over the past couple of days, encountering roadblocks with no clear solution in sight. The maze of nested divs I'm navigating through might be playing tricks on my mind, so having a fresh pair of ...

htmlcss

Is there a way to show all the items within a specific folder simply by clicking on the folder's name?

When a folder name is clicked, I would like to display all images from that particular folder. Currently, the code displays the list of folder structure and images separately, but my goal is to show the images only when the folder name is clicked. List of ...

javascriptphpjqueryajax

The function FormatCurrency is non-existent

I need assistance with converting a textbox value into a currency using the jquery.formatCurrency-1.4.0.js plugin. My JavaScript function is set up like this: $(document).ready(function() { $('.currency').blur(function() { $(&apo ...

javascriptjqueryhtmlajaxformat-currency

What is the best way to bring in this interface from the React-Particles-JS library?

I have been attempting to segregate my parameters from my JSX within the react-particles-js library. I organize my parameters in an Object: let config = { "particles": { "number": { "value": 50 }, ...

htmlcssreactjstypescriptparticles.js

Utilizing various Material UI Sliders on a single page with shared color properties

After creating a component called "SliderBox", I noticed that it returns a div containing a Material UI Slider with createMuiTheme and an input component. The "SliderBox" component utilizes an onHover method on the parent div to change the component' ...

javascriptmaterial-uislider

When using the jQuery .first() method, it actually retrieves a selection of elements rather than just the initial

When utilizing the first() method on a group of elements, it appears to exhibit unusual behavior. $("button.overlay").on("click",function(e){ e.stopPropagation(); let i = $(e.target).closest('.style-display').children( ...

jquerymethodsundefined-behavior

Save the values of the first and second characters in two separate variables

Can someone help me with storing the first and second characters of a value in separate variables, id and ccMain, using either jQuery or JavaScript? Below is the HTML code needed to set up the environment: <span id="ccMain">GM</span> ...

javascriptjquery

Find out whether the page was reloaded or accessed directly through a hyperlink

I need to find out if the page was accessed directly via a link. If it was, I need to perform a certain action. However, my current implementation is not working as intended, as even a page refresh triggers this action. Is there an alternative method to ch ...

javascriptreactjstypescript

Using Material-UI in a project without the need for create-react-app

My objective is to utilize Material-UI without relying on create-react-app, as I feel that it abstracts too much and hinders my learning process. Unfortunately, all the instructions I have come across are centered around create-react-app. I am aiming to s ...

javascriptreactjsbuttonmaterial-ui

Adding content before an element in an Angular directive

Shown below is the HTML code: <div class="row"> <div ng-if="isLoadingApprovalUrl" class="col-xs-12"> <div class="text-center"><span class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></span></div> </div ...

javascriptjqueryangularjs

Issue with page refreshing not functioning on localhost in Rails and AngularJS collaboration

I recently encountered a strange issue while working on my Rails 4.2 + AngularJS 1.5 project. Whenever I attempt to refresh (F5) the main web-page, there's about a 9 out of 10 chance that the refresh doesn't happen correctly. In these cases, all ...

javascriptruby-on-railsangularjsheroku

Creating mp4 files from a sequence of jpg images using Node.js

My server continuously receives jpg files from a client. The challenge at hand is: how can I create one mp4 file using all of these jpg files? I currently save all the jpg files and then utilize ffmpeg with “filename%3d.jpg” once the client finishes s ...

javascriptnode.jsffmpeg

The _.get function is not compatible with the module.exports object

After exporting an object from a node file, my code is not functioning as expected. (path './../../config/cloud.js): module.exports = { some: { property: 1 } } Even though I am using the following code: const config = require(&ap ...

javascriptnode.jslodash

What are some methods for accessing jQuery ajax result data in Internet Explorer versions 7 or 8?

So, I'm facing an issue with retrieving the resultCount variable in different versions of Internet Explorer. int resultCount = 3; mav.addObject("resultCount", resultCount); This is how my jsp code looks like: $.ajax({ url: ...., type: &ap ...

jqueryajaxinternet-explorer-8internet-explorer-7

Retaining the value of a textbox while moving to another page

On a specific page (let's call it the sample page), there are four text boxes with pre-filled values. There is a button on this page for navigating to the next page, which also has a back button that takes you back to the sample page. However, when re ...

javascriptjqueryasp.net

The jQuery AJAX function executing twice upon click

I've encountered an issue while attempting to make two Ajax calls on a single page using jQuery. The first Ajax call executes successfully and generates the desired results. However, the second Ajax call is meant to be triggered by clicking a button b ...

javascriptjqueryajax

"Exploring the Power of Uploadify for Efficient Image Compression

Currently, I am implementing Uploadify on a client's website in order to facilitate the bulk uploading of images to their photo gallery. Lately, I have encountered an issue where the clients are uploading large photographs (3 MB and higher). I am con ...

jqueryuploadifymultifile-uploader

Checking URL validity using JavaScript Regex

I attempted to validate a URL with or without the http protocol, but no matter what I tried, the function kept returning false. I verified my regex string on this website: And it appeared as expected. function isUrlValid(userInput) { var rege ...

javascriptjqueryregex

HTML & Javascript |iOS| - Eliminate emojis

Right now, I have an HTML textarea element that enables users to input text, which works well. However, the issue is that users are able to input emojis. I am wondering if there is a way to remove these emojis after they have been entered by the user, or ...

javascripthtmlios