Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read More" centered on mouseover. Any suggestions on how to achieve this? The divs are actually horizontal on the page, not sure why they appear vertical here.

.feature-container {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9;
  width: 100%;
  display: inline-block;
}

.feature-box {
  background: #fff;
  text-align: center;
  padding: 40px 30px;
  position: relative;
  width: 25%;
}

.feature-box i {
  font-size: 50px;
  margin-bottom: 15px;
  cursor: pointer;
}

.feature-box:hover {
  background: #208541 !important;
  color: #f6f6f6;
}

.feature-box.dark {
  background: #f6f6f6;
}
<div class="feature-container">


  <div class="feature-box-container feature-slider">
    <div class="feature-box">
      <i class="ion-ios-list-outline"></i>
      <h4>Content</h4>
      <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>

    </div>
    <div class="feature-box dark">
      <i class="ion-ios-cog-outline"></i>
      <h4>Customization</h4>
      <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
    </div>
    <div class="feature-box">
      <i class="ion-help"></i>
      <h4>Support</h4>
      <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
    </div>
    <div class="feature-box dark">
      <i class="ion-social-usd-outline"></i>
      <h4>Value</h4>
      <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
    </div>
  </div>


</div>

javascriptjqueryhtmlcss

Answer №1

Here's a quick way to start off. I'm utilizing the .css('visibility', 'hidden'); method to only hide text without affecting box height adjustments. If you require something different (like using CSS for height fixes), you can make use of .hide() and .show() functions to toggle text visibility during mouse events.

$('.feature-box').on('mouseenter', function(){
  $(this).find('i, h4:not(.rm), p').css('visibility', 'hidden');
  $(this).find('h4.rm').css('visibility', 'visible');
});

$('.feature-box').on('mouseleave', function(){
  $(this).find('i, h4:not(.rm), p').css('visibility', 'visible');
  $(this).find('h4.rm').css('visibility', 'hidden');
});
.feature-container {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9;
  width: 100%;
  display: inline-block;
}
h4.rm{ visibility: hidden; }
.feature-box {
  background: #fff;
  text-align: center;
  padding: 40px 30px;
  position: relative;
  width: 25%;
}

.feature-box i {
  font-size: 50px;
  margin-bottom: 15px;
  cursor: pointer;
}

.feature-box:hover {
  background: #208541 !important;
  color: #f6f6f6;
}

.feature-box.dark {
  background: #f6f6f6;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">


  <div class="feature-box-container feature-slider">
    <div class="feature-box">
      <i class="ion-ios-list-outline"></i>
      <h4>Content</h4>
      <h4 class="rm">Read more</h4>
      <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>

    </div>
    <div class="feature-box dark">
      <i class="ion-ios-cog-outline"></i>
      <h4>Customization</h4>
      <h4 class="rm">Read more</h4>
      <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
    </div>
    <div class="feature-box">
      <i class="ion-help"></i>
      <h4>Support</h4>
      <h4 class="rm">Read more</h4>
      <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
    </div>
    <div class="feature-box dark">
      <i class="ion-social-usd-outline"></i>
      <h4>Value</h4>
      <h4 class="rm">Read more</h4>
      <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
    </div>
  </div>


</div>

Answer №2

If you want to achieve this, my suggestion is to utilize a CSS-only solution.

Create a new div, position it using absolute, and then simply display it on hover of the feature-box.

For the positioning to work correctly, make sure the feature-box has position: relative set, while the new div should have a higher z-index and top: 0; properties defined.

Answer №3

If you need to accomplish this, you can utilize css as shown below.

.feature-container {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9;
  width: 100%;
  display: inline-block;
}

.feature-box {
  background: #fff;
  text-align: center;
  padding: 40px 30px;
  position: relative;
  width: 25%;
  display: inline-block;
}

span.read-more {
  display: none;
  font-weight: bold;
  position: absolute;
  z-index: 10;
  top: 0;
}

.feature-box:hover p {
  display: none;
}

.feature-box:hover span.read-more {
  display: block;
  position: relative;
}

.feature-box i {
  font-size: 50px;
  margin-bottom: 15px;
  cursor: pointer;
}

.feature-box:hover {
  background: #208541 !important;
  color: #f6f6f6;
}

.feature-box.dark {
  background: #f6f6f6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">


  <div class="feature-box-container feature-slider">
    <div class="feature-box">
      <i class="ion-ios-list-outline"></i>
      <h4>Content</h4>
      <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p><span class="read-more">read more</span>

    </div>
    <div class="feature-box dark">
      <i class="ion-ios-cog-outline"></i>
      <h4>Customization</h4>
      <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p><span class="read-more">read more</span>
    </div>
    <div class="feature-box">
      <i class="ion-help"></i>
      <h4>Support</h4>
      <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p><span class="read-more">read more</span>
    </div>
    <div class="feature-box dark">
      <i class="ion-social-usd-outline"></i>
      <h4>Value</h4>
      <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
      <span class="read-more">read more</span>
    </div>
  </div>


</div>

Answer №4

If you do not need to dynamically manipulate the 'boxes', there is a way to achieve it using additional tags and CSS like this:

.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9; width:100%; display:inline-block;}
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;display:inline-block;}
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;}
.feature-box:hover{background:#208541 !important; color:#f6f6f6;}
.feature-box.dark{background:#f6f6f6;}

.feature-box .mask{display:none;}
.feature-box:hover .mask{background-color:#333;color:white;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;display:block;}
.feature-box:hover .mask span{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);}
<div class="feature-container" >


<div class="feature-box-container feature-slider">
        <div class="feature-box">
            <i class="ion-ios-list-outline"></i>
                    <h4>Content</h4>
                    <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
            <div class="feature-box dark">
            <i class="ion-ios-cog-outline"></i>
                    <h4>Customization</h4>
                    <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
            <div class="feature-box">
            <i class="ion-help"></i>
                    <h4>Support</h4>
                    <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
            <div class="feature-box dark">
            <i class="ion-social-usd-outline"></i>
                    <h4>Value</h4>
                    <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
         </div>


  </div>

if you dont need any fancy styles for the "read more" text, you could use .feature-box:hover::before{} to add the text and center it as I did with .mask span.

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

Trouble with Angular 7: Form field not displaying touched status

I am encountering an issue while trying to input data into a form, as it is not registering the touched status. Consequently, an error always occurs when attempting to send a message back to the user. In my TypeScript file, I am utilizing FormBuilder to c ...

htmlangulartypescripterror-handlingruntime-error

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

jqueryasp.net-mvcposthtml

How do I return a <div> element to its initial state after JavaScript has made changes to it?

So, I have this situation where a DIV contains a form. After users submit the form successfully, I want to replace the form with a simple message saying "everything is good now". This is how I currently do it: $("#some_div").html("Yeah all good mate!"); ...

javascriptjqueryhtmlhtml-manipulation

Secure login using AngularJS

I am in need of modifying the code on this Plunker: plnkr.co/edit/Mvrte4?p=preview I want to remove user roles so that all users have access to the same page. If possible, I would like the modified code to be split into two pages: Page 1: index.html co ...

javascriptangularjsjsonauthentication

Applying the fadeIn() function within the afterAdd callback of KnockoutJS

I'm currently delving into the world of the foreach binding, but I'm stumped as to why the $(element).fadeIn(500) line in the code snippet below isn't functioning properly: ko.applyBindings({ myItems: ko.observableArray([ 'A& ...

jqueryknockout.jsknockout-3.4

Embracing async-await while awaiting events in node.js

I am attempting to incorporate async await into a project that is event-driven, but encountering an error. The specific error message I am receiving is: tmpFile = await readFileAsync('tmp.png'); ^^^^^^^^^^^^^ SyntaxError: Unexpec ...

javascriptnode.jsasynchronousasync-await

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

javascriptangularjstypescriptprototypeminify

Increment and Decrement Values with JQuery

I am looking to implement a client-side Plus/Minus system where users can click on the plus sign to increase a value by 1 and minus sign to decrease the value by 1. The value should not go below zero and it should initially start at 0. Is there a simple wa ...

jquery

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...

javascripthtmlhttpfrontend

Hmm, JavaScript is throwing a JSON parse error related to single quotes. But where exactly is

When using an upload php script with AS3 and now with JavaScript, I encountered a test feature that should return this if everything is okay: {"erro":"OK","msg":"","descr":"op:ini,urlArq:\/Library\/WebServer\/Documents\/www\/sintr ...

javascriptjson

The history.push function seems to be leading me astray, not bringing me back

Issue with History.Push in Register Component App function App() { const logoutHandler = () =>{ localStorage.removeItem("authToken"); history.push("/") } const [loading, setLoading]= React.useState(true) useEffect(()=>{ ...

javascriptnode.jsreactjsreact-router

The data type 'string | number | boolean' cannot be assigned to type 'undefined'. Specifically, the type 'string' is incompatible with type 'undefined'. Error code: ts(2322)

When attempting to create a partial object with specific fields from a full object that meet certain criteria, I encountered a TypeScript error message. To better explain this issue, I designed a test module to showcase the concept/problem without using ac ...

javascripttypescriptobject

What is the most efficient way to retrieve the operating system's name and version using JavaScript?

I'm in the process of developing an object that will simplify accessing browser and system information by implementing a function. One particular function within this object is responsible for retrieving the operating system name and version, returnin ...

javascripthtmloperating-systemuser-agentnavigator

Updating a child component in React while applying a filter to the parent component

Although I've come across this question before, I'm struggling to comprehend it within my specific scenario. I'm currently using a search bar to filter the data, which is functioning properly. However, the image is not updating. The URL bei ...

javascriptreactjs

Having issues with the script not functioning when placed in an HTML document or saved as a .js file

Even though the database insertion is working, my script doesn't seem to be functioning properly. The message "successfully inserted" appears on the saveclient.php page instead of the index.html. In my script (member_script.js), I have placed this in ...

javascriptphpajax

Execute JavaScript AJAX Request On Page Load

I am facing an issue with creating an onload event in which an AJAX function needs to be called and passed a value. The challenge lies in the fact that I have both my header and footer split into sections via PHP, therefore I cannot place it on the body ta ...

phpjavascriptjqueryajax

What is the best way to output the leaf nodes from an array of object lists in TypeScript?

Having trouble with TypeScript, specifically working with arrays and filtering out leaf nodes. I want to print only the leaf nodes in the array, resulting in ['002', '004', '007']. Can someone please assist me? Excited to lear ...

javascriptangulartypescriptfrontend

Facing issues while attempting to retrieve the generated PDF through an Ajax-triggered controller action

I am having trouble downloading a PDF/XLSX file from the controller. I have tried using both jQuery and Ajax, but I can't seem to get it to work. Here is an example of the code in the controller: var filestream = new FileStream(pdfoutputpath + " ...

jqueryasp.netajaxasp.net-mvc-4asp.net-core

"X-Requested-With" header not being included in XMLHttpRequest request

After successfully using jQuery.ajax() to make an ajax call to an MVC action, I decided to switch to using the XMLHttpRequest along with the HTML5 File API due to some forms containing file controls. However, since making this change, the MVC action no lon ...

javascriptjqueryajaxhtml

I encounter Error 406 and CORS issues when making API calls

I am currently engaged in a project aimed at helping my employer keep track of shipping loads, customers, carriers, and locations. The frontend is built using a react app that enables users to input information regarding loads, customers, etc. On the backe ...

javascriptnode.jsexpress