I have a div with the class name ordershape and inside it, there is another div called fad-res.
My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs.
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>
Your HTML code is not valid because the ordershape div has not been properly closed.
You don't need to use jQuery for this, you can achieve the desired effect with CSS:
.ordershape:hover .fad-res{
display:block;
}
CSS Demo
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
.ordershape:hover .fad-res{
display:block;
}<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>If you prefer using jQuery, here's how you can do it:
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
jQuery Demo
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>Avoid using javascript in this case. Instead, make use of the CSS properties transition and opacity, along with the :hover selector.
.fad-res {
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
background: #555555;
height: 60px;
width: 100px;
}
.ordershape {
background: #f6f6f6;
height: 100px;
width: 100px;
float: left;
margin-right: 2px;
}
.ordershape:hover .fad-res {
opacity: 1;
}<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>If you're looking to give the jquery version a shot, here's one way to do it:
$(".ordershape").hover(function(){
$(this).find(".fad-res").toggle();
}).fad-res{
display : none;
}
.ordershape{
width : 20px;
height: 20px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...
Upon navigating to my jQuery DataTable, I aim to showcase the count of Users pending activation. Typically, I would use fnGetData with (this), but since I am not triggering this on a click event and wish to count all entries in the table, I am unsure of ho ...
One of the features in my app involves retrieving data from an API and storing it in $scope.newz. The previous user activity is loaded from LocalStorage as bookmarkData. I am facing a challenge with comparing the contentId values in arrays $scope.newz an ...
I have a specific item: this.item = { name:"Michael", age:18 }; I am looking to display it in an HTML format. name: Michael age: 18 <div >{{ item (name) }}</div> --??? should put name <div>{{ item.name }}</div> < ...
I'm completely new to development and I'm attempting to deploy my very first application (let's call it testing). I am looking to deploy my Next.js React app using Passenger (which is included and required by Dreamhost, so I have not insta ...
Hope you're all doing well. I've been having some trouble with using header("Location...") to redirect from one page to another on my website. For some reason, it keeps redirecting me back to the same page. I've gone through my code multiple ...
I currently work with the Visual Studio Code editor and execute "npm run sass" in the bash terminal. Whenever I modify the scss file, the terminal displays the following message: => changed: C:\Users\kenne\modern_portfolio\scss&bso ...
Within a span element with an ID, there is a mixture of text and a paragraph tag. The goal is to use selenium webdriver to pinpoint the street address in the mix below: <span id="myspan"> <p>fullname</p> street address - has no ...
I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...
The ng-repeat feature is being utilized here with an inclusion of a different HTML partial. <div ng-repeat="item in feedItems"> <div ng-include="'item.itemType.html'"> </div> </div> Below is the CSS for the partial H ...
When creating a style called Link, the theme is contained inside of this.props. How can the theme be extracted from props and passed into the Link styled component? Error: ReferenceError - theme is not defined import React from 'react'; impo ...
I have a specific scenario where I need to create a link that redirects to an external website, of which I do not own. However, I am aware that there is a div with a particular class located at the bottom of their page, linking to an article. My goal is to ...
When constructing a vue.js application using CLI and vue-router, you can include mode: 'history' in the router to remove the hash from the URL. However, is there a way to eliminate the # from the URL when using Vue through a CDN? For instance, in ...
Upon returning an object from the Observable, one of its properties is a function. Even after assigning an empty function and emitting the object, the expectation using toBeObservable fails due to a non-deep match. For testing purposes, I am utilizing r ...
Below is a json object that I have. var json1 = {"00" : "00", "15" : "15", "30" : "30", "45" : "45"}; I am trying to populate a select element using the above json in the following way. var selElem = $('<select>', {'name' : nam ...
As a ML professional diving into frontend development, I have recently incorporated various fixed assets such as images into the assets folder for React. However, I've noticed that my website is running slower than expected. Do you believe that these ...
We are in the process of upgrading our application from AngularJS to the latest version of Angular. I am currently working on writing tests that transition from the AngularJS version of the app to the admin application, which is built using the latest ver ...
As a newcomer to nedb with node.js, I'm curious about how to showcase all records or SELECT * FROM tablename. I understand that nedb operates differently from mysql, but I need to integrate a database within my electron application. I want to determin ...
Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...
I've come across various instances of NG2 pipes online and decided to create one myself recently: @Pipe({name: 'planDatePipe'}) export class PlanDatePipe implements PipeTransform { transform(value: string): string { return sessionStor ...