[CSS] :hover background wordt groter?

[sj31]

Hallo allemaal,

Ik ben bezig met een websitetje, nu heb ik een zoek knop gemaakt. Hierbij maak ik gebruik van een plaatje als icoon voor loep. de button waar opgeklikt wordt is 35px x 35px en deze heeft een zwarte achtergrond met dus die background-image van de loop die normaal 50px x 50px is, met background-size heb ik deze teruggebracht naar 35px x 35px, maar nu heb ik een :hover ingesteld voor die button dat de background wit wordt. dit gebeurd ook alleen als ik dan daadwerkelijk hover over de button en dan weer weg ga lijkt het net alsof het orginele formaat van de background-image terug komt en dan gelijk weer terug springt naar de aangegeven 35px x 35px.

Zie hieronder:


Heeft iemand hier een verklaring voor?
De code voor de knop is alsvolgt:

code:

.searchbox-submit{
    width:35px;
    height:35px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:18px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:35px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:rgba(0,0,0, 0.5);
    background-image: url(../img/search-icon.png);
    background-size: 35px;
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.searchbox-submit:hover {
    background: rgba(255,255,255, 0.5)
}

[Shivs]

In je originele knop zet je allerlei dingen via specifieke background opties, bijvoorbeeld -image en -size. In je hover doe je dat met alleen background. Hiermee overschrijf je waarschijnlijn alle opties die je hebt in het origineel. Ik verwacht, zonder het te testen, dat als je in de hover background-color gebruikt dat het wel werkt.

[sj31]

JelkeBart schreef op donderdag 04 juni 2015 @ 09:22:
In je originele knop zet je allerlei dingen via specifieke background opties, bijvoorbeeld -image en -size. In je hover doe je dat met alleen background. Hiermee overschrijf je waarschijnlijn alle opties die je hebt in het origineel. Ik verwacht, zonder het te testen, dat als je in de hover background-color gebruikt dat het wel werkt.

Ik zie het, dankjewel!