JSlider hover effect acting weird

Question

This is what happens when I use the JSlider with the hover effect:

 //Leadership slider
        JLabel leadershipLabel = new JLabel("LEADERSHIP: ");
        leadershipLabel.setSize(TEXT_FIELD_WIDTH, ELEMENT_HEIGHT);
        leadershipLabel.setLocation(applicationTitle.getX(), studentQualitiesLabel.getY() + studentQualitiesLabel.getHeight());
        leadershipLabel.setFont(new Font("Times New Roman", Font.ITALIC, 16));


        JSlider leadershipSlider = new JSlider(1,10,1);
        leadershipSlider.setSize(TEXT_FIELD_WIDTH, ELEMENT_HEIGHT);
        leadershipSlider.setLocation(leadershipLabel.getX() + leadershipLabel.getWidth(), leadershipLabel.getY());
        

        leadershipSlider.addChangeListener(new ChangeListener(){

            public void stateChanged(ChangeEvent e){
                int leadership = leadershipSlider.getValue(); //grabs the slider value
                leadershipLabel.setText("LEADERSHIP: " + leadership); //displays the slider value
            }
        });

        


        leadershipSlider.addMouseListener(new java.awt.event.MouseAdapter(){
            public void mouseEntered(java.awt.event.MouseEvent evt){
                leadershipSlider.setBackground(new Color(255,255,0,80));
            }
            public void mouseExited(java.awt.event.MouseEvent evt){
                leadershipSlider.setBackground(UIManager.getColor("control"));
            }
        });

The bar should just highlight yellow when I hover over it and go back to normal when I stop hovering over it. But when I try to use the slider(drag the arrow to different values), text glitches out under it. Also the more i click it, the stronger the yellow highlight becomes until i hover off, then it resets.