CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground-image
Berklie
Berklie

Reputation: 590

How To Prevent CSS Background Image From Moving When Shown?

I am using a background image to provide additional user instruction as to which navigation section is currently selected; and by using "background-position: right center;" for said background image, the code causes the background image to move across the container each time that it is shown... as opposed to just already showing up in the desired location without any movement.

How do I modify my code so that the background image does not move across its container, and simply appears in the desired location (right and center)?

Here is the JSFiddle demonstrating the unwanted movement

HTML

<div id="panel">
    <div class="panel-styling selected-panel">
    One
    </div>

    <div class="panel-styling">
    Two
    </div>

    <div class="panel-styling">
    Three
    </div>
</div>

CSS

#panel {
    float: left;
    width: 50%;
    margin: 2% 0 0 2%;
    padding: 0 0 0 0;
}

.panel-styling {
    width: 100%;
    padding: 8px 0 7px 0;
    text-align: left;
    border-bottom: 1px solid rgba(136,136,136,1);

    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 16px;
    line-height: 100%;
    color: rgba(136,136,136,1);
}

.panel-styling:hover {
    cursor: pointer;
    color: rgba(255,0,0,1);
      border-bottom: 1px solid rgba(255,0,0,1);

    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

.selected-panel {
    color: rgba(255,0,0,1);
    border-bottom: 1px solid rgba(255,0,0,1);

    background-image: url('http://s23.postimg.org/7urmjdktj/slider_arrow.png');
    background-position: right center;
    background-repeat: no-repeat;
}

JavaScript

$('.panel-styling').click(function () {
    $('.panel-styling').removeClass('selected-panel');
    $(this).addClass('selected-panel');
});

Thanks!

Berklie

Upvotes: 0

Views: 111

Answers (1)

aze&#243;s
aze&#243;s

Reputation: 4901

The transition property in your CSS is the problem. Replace the all for something more specific. If you want a transition in the text color, then just use color:

.panel-styling:hover {
    cursor: pointer;
    color: rgba(255,0,0,1);
    border-bottom: 1px solid rgba(255,0,0,1);

    -webkit-transition: color 0.25s;
    -moz-transition: color 0.25s;
    transition: color 0.25s;
}

Upvotes: 2

Related Questions