Below is the liquid code I am working with:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
{% include 'icon-btn--rounded' %}
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
Whenever the button is hovered over, I want to display a different icon, such as:
{% include 'icon-btn--white' %}
I am aware of using display: none to achieve this, but how can I dynamically switch between buttons upon hover?
If you want to display different icons on hover, CSS is the way to go.
Liquid is a scripting language that runs before the webpage is fully loaded. This means that once the page content is visible, the liquid code has already executed and won't run again until the page is refreshed.
In simpler terms for developers, attempting to call a back-end function using front-end tools is not recommended.
CSS and JS cannot directly interact with liquid, but liquid can interact with them. Put another way, you can generate JavaScript and CSS code using Liquid, but you cannot generate liquid code using JS and CSS.
Additionally, the use of includes is outdated and you should opt for render instead.
Below is the code snippet to achieve the desired functionality:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
<div class="icon">
{% render 'icon-btn--rounded' %}
</div><!-- /.icon -->
<div class="icon icon--hover">
{% render 'icon-btn--white' %}
</div><!-- /.icon -->
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
<style>
.icon--hover {
display: none;
}
.btn--rounded:hover .icon {
display: none;
}
.btn--rounded:hover .icon--hover {
display: block;
}
</style>
A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...
I haven't coded for a while and my knowledge of JavaScript is still in its early stages, so please excuse me if this question seems a bit naive. Essentially, I've created code that filters an HTML table based on the items in the first column. Th ...
After some research, I think I have a grasp on CSS selectors and their appearance. However, when using selenium, how can I locate a CSS selector on a website and then click on it? The correct syntax eludes me. I encountered this error as well: selenium.co ...
Hey, can you give me a hand with this? :) I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http:// ...
Is it feasible to create a hover effect that displays both an up and down menu simultaneously? I've tried positioning the up menu absolutely, but it doesn't seem sufficient to me. I want a dual menu setup where the up and down menus display next ...
We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...
During the process of creating a comprehensive website for a client who has a strong affinity towards Google tools and recommendations, I have encountered an interesting challenge: Despite my best efforts, I seem unable to attain a flawless score for the ...
.title { background-color: #FFC20E; font-size: 23px; font-weight: 600; padding: 5px 0px 5px 22px; font-family: "Open Sans"; } <h3 class="title">Title</h3> I need to create a title with a unique background color, can you ple ...
I am currently working on aligning a div that sits at the bottom of all other divs. The last div is set to float and aligned at the top using CSS. I am unsure how to align it from the left side without any issues when the screen resolution changes. Is th ...
Query Update I provided a response to the query below, however, I am experiencing some lag and a noticeable stepped transition between images. Can anyone offer advice on how to optimize this issue? Perhaps it would be better to go back to using a static ...
My newsletter subscription box features a form that spans the entire width of its parent element, causing the button to fill up all available space. To add a visual touch, I used the before CSS pseudo-element to create a small 'arrow' shape abov ...
In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...
Upon clicking the button labeled id=cancel, the user will be directed to index.php. $('#cancel').click(function() { if(changes > 0){ $('#dialog-confirm').dialog('open'); }else{ window.location.href = ". ...
I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...
CodePen showcasing the mobile navigation Upon initial interaction with the mobile navigation, it operates as expected. However, a bug arises with subsequent interactions. The navigation either opens and closes instantly or the links appear in a jumbled or ...
While my website is somewhat responsive on desktop, the display on iPad or tablet-sized devices leaves much to be desired. Despite having an acceptable layout, everything appears too large, making navigation difficult. It's worth noting that my websit ...
Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll. I attempted passing it this way: <Childcomponent style="height: 200px; overflow-y: scroll;" /> but had no luck. ...
I've been working on creating a customized select tag with an inline SVG background using -webkit-appearance: none in my CSS. For reference, here is the JSFiddle link: http://jsfiddle.net/sucrenoir/yHR53/5/ select { font-size: 30px; border: ...
I'm currently working on creating a horizontal counter to indicate the step in progress. We are using bootstrap 4 for this project. The CSS is functioning correctly without bootstrap, but once it is added to the project, it's not aligning vertica ...
I have this HTML code that is functioning well on Chrome, Safari, and Mobile Safari. However, when testing it on Android 4.0.3, the translateZ property does not seem to have any desired effect on the div element. While everything else works as expected, ...