Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position.
Currently, I have successfully implemented the color change and scaling on hover, but I am struggling with animating the process. Any suggestions or guidance would be greatly appreciated.
Check out my CodePen for reference!
I've incorporated a css3 transition to control the duration of scaling and background changes:
.logo-square, .logo-bg{
transition: 0.7s;
}
Additionally, I'm utilizing this jQuery snippet to scale the box (since jQuery is being used. Keep in mind: Achieving this with pure CSS using the :hover selector is also an option):
$('.logo-square').css({
'-webkit-transform': 'scale(0.6)',
'-moz-transform': 'scale(0.6)',
'-o-transform': 'scale(0.6)'
});
Furthermore, here's how you can revert back:
$('.logo-square').css({
'-webkit-transform': 'scale(1)',
'-moz-transform': 'scale(1)',
'-o-transform': 'scale(1)'
});
Make use of .css instead of .attr()
UPDATE: You have the option to address this issue solely with CSS by leveraging the :hover selector
Here's an example:
.logo-square, .logo-bg{
transition: 0.7s;
}
.bm-logo:hover > .logo-square{
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
}
.bm-logo:hover > .logo-bg, .bm-logo:hover > .logo-square{
fill: #b565a7;
}
Upon running my site through the w3cvalidator tool, I encountered the following errors: "Attribute data-ls not allowed on svg element at this point" and "End tag svg did not match the name of the current open element (use)". Below is a snippet of the cod ...
Recently delved into the world of Angular and I've hit a roadblock. I'm struggling to grasp how Angular accesses data in the DOM. In all the examples I've come across, data is initialized within a controller: phonecatApp.controller(' ...
I am facing a challenge with a function that combines data from two tables, each containing a column named "name". How can I specify which table's name should be displayed? function createTableRow(customers) { var data = JSON.parse(customers.resu ...
Looking for a solution to download a file from an ajax GET request in angularjs? Currently, I am using an invisible iframe to trigger the "Save as" popup for the downloaded file. However, I need to change the name of the file before the popup appears. If ...
Within my JavaScript code, I have a rather simple event listener set up to listen for a click: element.addeventlistener('click', ()=>{ #do somthing }) However, I am encountering an issue on IOS (iPhone) where scrolling triggers the event list ...
When trying to access functions in my SWF using jQuery code, I encounter a compatibility issue with Internet Explorer. The code works fine in all other browsers except for IE. As jQuery is supposed to provide cross-browser functionality, writing addition ...
Is there a way to combine all form group items like Select and Input using only the bootstrap framework? I attempted the method below, but there is an extra space between the Select and Input Box. Check out the DEMO ...
Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...
Currently, I have implemented a drop-down list using jQuery that activates when the user hovers over the main menu. This functionality is working appropriately in all browsers except for IE7 and earlier versions. In an attempt to ensure the drop-down menu ...
Here's the current status of my session tokens on the server: In my server.js file: app.use( session({ secret: "{ ...
Working with UI-Router in Angular 1.7, I am facing an issue wherein I want to change the state and wait for the content to load before scrolling to the bottom of the page. // Using a class method onCreate() { this.post().then(response => { ...
When using simple javascript, any content written to the console is displayed on the console itself. An example would be as follows: const name = "david"; This will display david in the console. However, in Node.js, if I store a request in a const varia ...
I am struggling to get the Logo to print followed by all buttons lined up side-by-side. I have experimented with different display properties within the first <div> tag such as block, inline-block, and even removing the display property altogether. ...
Recently, I implemented a search bar specifically designed to locate someone's policy. Upon entering their policy number, the search provides details such as claims and policy wording. Initially, this process involved a redirection back to the same pa ...
Currently, I am working on a form that is structured using tabs, optional fieldsets, and various field elements in HTML. Below is a simplified representation of the structure: div.tab1 div.fieldset3 div.container308 div.container314 div.fieldset4 d ...
When a user saves in my Rails application, it triggers an Ajax request to save the post and then runs the update.js.erb file. This file contains some jQuery code: $('body').append('<div class="message">Saved</div>'); Due t ...
I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...
Can you explain how Angular is able to locate the directives on a webpage and establish connections with or observe those elements? I've searched through the DOM reference, but it seems like methods like getElementbySomething and querySelectorAll may ...
I'm looking for guidance on how to insert an array from a PHP MySQL page into a separate JavaScript file. Can someone please help me with indicating where to include the PHP URL and provide the correct format for the PHP array code in order to achieve ...
For my personal project, I decided to learn Django. Initially, I created two separate apps, "API" and "Search". As development progressed, I merged the search functionality into the API app and updated the views accordingly. I also designed a base template ...