Is there a way to modify the commandlink image when the mouse hovers over it in PrimeFaces?

After implementing this code snippet, my commandlink seemed to vanish into thin air. Upon inspecting it with firebug, I discovered that it was present but had a size of 0 x 0 px.

.myNewButton {
width: 50px !important;
height: 50px !important;
background-image: url('/resources/img/e_menu_icons/x.png')    !important ;
}

.myNewButton:hover {
width: 50px !important;
height: 50px !important;
background-image: url('/resources/img/e_menu_icons/e.png') !important ;
}


<p:commandLink  styleClass="myNewButton" value=""
               oncomplete="myDialog.show(); return false;"
action="#{myBean.actionMyAction()}">
</p:commandLink>
cssprimefaceshovercommandlink

Answer №1

When attempting to reproduce the issue, I found that the way the link is displayed with display: block; had a significant impact:

<style>
    .myNewButton {
        display: block;
        width: 84px !important;
        height: 84px !important;
        background-image: url('#{request.contextPath}/resources/img/x.png') !important;
    }
    .myNewButton:hover {
        display: block;
        width: 84px !important;
        height: 84px !important;
        background-image: url('#{request.contextPath}/resources/img/e.png') !important;
    }
</style>

<h:form>
    <p:commandLink  styleClass="myNewButton" 
                    oncomplete="myDialog.show(); return false;" />
</h:form>

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

Unveiling the Power of Angular in Handling Date and Time

Recently, I encountered an issue with the following code snippet: <ng-template>{{date:'MM/dd/yyyy h:mm:ss a Z'}}</ng-template>. This code displays a date and time in one long line. My goal is to insert a line break between the date an ...

cssangularjs

JavaScript for Dynamic Scaling Animations

I am currently working on animating an SVG button and I am trying to incorporate the transform property with a fadeout using opacity attributes in Javascript. This is how I have attempted to write the code: (Starting with opacity 0 and scale 0) (I am awa ...

javascriptcssattributestransform

Creating a customized design for a q-popup-edit

As I navigate through using Quasar in Vue, I stumbled upon a q-popup-edit that allows me to gather input from the user. Despite my attempts at researching via Google and reading documentation, I have hit a roadblock when it comes to customizing the style o ...

cssvue.jsquasar

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

javascripthtmlcss

Investigating nearby table cells

I am in the process of creating a game called Dots and Boxes. The grid is filled with numerous dots: <table> <tr> <td class="vLine" onclick="addLine(this)"></td> <td class="box" ...

javascripthtmlcss

Guide to setting up a nested vuetify navigation drawer

I am facing a scenario where I have one fixed navigation drawer with icons and another dynamic navigation drawer that should open and close adjacent to the fixed one without overlapping. The current implementation is causing the dynamic drawer to overlap t ...

javascriptcssvue.jsvuetify.js

How to retrieve the image source using jQuery

<img src="../img/arnold.png" alt="Arnold"> Is there a way to retrieve the absolute path of this image using jQuery? Currently, when I use img.attr("src"), it only returns "../img/arnold.png", but I need it to return something like "http://site.com/ ...

javascriptjqueryhtmlcssimage

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...

javascriptcssipadchart.jsvisualization

Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted. Here is the HTML code for the card: <div class="container"> <div class="flex-row row"> <div class="col ...

htmlcss

Is it a bug that using addClass or toggleClass with JQuery inside a click method does not seem to be functioning properly?

This appears to be a simple issue, yet it is not functioning correctly. I managed to make it work by placing the .normal class above the .highlight class, despite only adjusting the position and not altering the style. This lack of logic is puzzling. Sin ...

jquerycssclickaddclasstoggleclass

"Customize the appearance of your theme by adjusting the background and text colors when making a

Is there a way to dynamically change the style of a webpage based on user selection using CSS in AngularJS? I've searched online, but haven't found a solution that works for me. I have a CSS file with different styles and I want to apply these ...

cssangularjs

When the text input is selected, automatically scroll to the bottom

I found a codepen example by Chris Coyer and decided to fork it. My goal is to make the label move to the top instead of staying at the bottom, as in his original design. However, I am facing an issue with getting the cursor to move to the bottom when typ ...

htmlcsssass

What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...

csstwitter-bootstrap

Putting a Pause on CSS Transition using jQuery

I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...

javascriptjqueryhtmlcss

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

Unveiling the Secrets of Implementing Interactive HTML Tabs

I have a simple HTML page that contains a table with two columns and two rows. My goal is to convert these two columns into tabs, so that when each row is clicked, it will display either a paragraph or another basic table with one row and column. All of t ...

jquerycssajaxhtml

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

Guide to Aligning col-md-3 to the Right Side in HTML Bootstrap 4

Is there a way to align one div on the right side, but within the same row? I am trying to place the value 172.21 on the right side of the row. Check out the screenshot here: https://i.sstatic.net/eg3K5.png Here is the HTML: <div class="row" ...

htmlcssbootstrap-4

How can CSS Bootstrap flex width be used to prevent parent element from expanding too much with long, single line text? Utilizing ell

​Having encountered a tricky situation with CSS and flexbox, I found myself needing to implement the following properties: ​text-overflow: ellipsis; ​white-space: nowrap; ​overflow: hidden; However, when the text was too long, it caused t ...

htmlcssbootstrap-4flexboxwidth

Exploring z-indices in event bubbling

JSFiddle: https://jsfiddle.net/uLap7yeq/19/ Issue Let's examine a scenario where there are two elements, canvas and div, positioned in the same location using CSS. The div has a higher z-index compared to the canvas, but how can we make sure events ...

javascriptjqueryhtmlcss