function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ratheven SivarajahRatheven Sivarajah 

I am trying to use hover in my css but it's not working

Hey everyone I have a quick question I have a outputlink that looks like a button and I want it to hover when I go over it. This is my code. Thank you in advance.

<style type="text/css">
    [id*=button] {  background-color: white !important;
                    border: 1px solid black !important;
                    color: black !important;
                    text-decoration: none !important;
                    padding: 9px !important;
                    cursor: pointer !important;
 }
 [id*=button:hover] {  background-color: white !important;
                }
 [id*=wrapper] {  
                    margin: auto;
                    width: 50%;
                    text-align: center !important;
                    padding: 10px;
                    height: 100px !important;
                }
   
</style>
    <div id="wrapper">
     <apex:repeat value="{!TechnologyProduct}" var="res" >
            <apex:outputPanel rendered="{!res.Detail_Link__c != null}" layout='none'>
                    <apex:outputlink value="{!res.Detail_Link__c}" styleClass="btn" id="button"> {!res.Detailed_Product_Name__c} </apex:outputlink>                  
            </apex:outputPanel>
     </apex:repeat>
    </div>
</apex:page>
Best Answer chosen by Ratheven Sivarajah
Shri RajShri Raj
<style type="text/css">
    [id*=button] {  
                    background-color: white !important;
                    border: 1px solid black !important;
                    color: black !important;
                    text-decoration: none !important;
                    padding: 9px !important;
                    cursor: pointer !important;
 }
 [id*=button:hover] {  
                    background-color: lightgray !important;
                }
 [id*=wrapper] {    
                    margin: auto;
                    width: 50%;
                    text-align: center !important;
                    padding: 10px;
                    height: 100px !important;
                }
</style>
<div id="wrapper">
    <apex:repeat value="{!TechnologyProduct}" var="res">
        <apex:outputPanel rendered="{!res.Detail_Link__c != null}" layout='none'>
            <apex:outputLink value="{!res.Detail_Link__c}" styleClass="btn" id="button">{!res.Detailed_Product_Name__c}</apex:outputLink>
        </apex:outputPanel>
    </apex:repeat>
</div>

 

All Answers

Shri RajShri Raj
<style type="text/css">
    [id*=button] {  
                    background-color: white !important;
                    border: 1px solid black !important;
                    color: black !important;
                    text-decoration: none !important;
                    padding: 9px !important;
                    cursor: pointer !important;
 }
 [id*=button:hover] {  
                    background-color: lightgray !important;
                }
 [id*=wrapper] {    
                    margin: auto;
                    width: 50%;
                    text-align: center !important;
                    padding: 10px;
                    height: 100px !important;
                }
</style>
<div id="wrapper">
    <apex:repeat value="{!TechnologyProduct}" var="res">
        <apex:outputPanel rendered="{!res.Detail_Link__c != null}" layout='none'>
            <apex:outputLink value="{!res.Detail_Link__c}" styleClass="btn" id="button">{!res.Detailed_Product_Name__c}</apex:outputLink>
        </apex:outputPanel>
    </apex:repeat>
</div>

 
This was selected as the best answer
Ratheven SivarajahRatheven Sivarajah
Thank you Shri Raj