2

Making a quiz game which have 4 answer. In 1st question, after choosing correcting one, hover (background color) not working on previous answer option (in next question) while hover working fine on other 3 option. If next question success, then hover again not working on previous chosen option. Whats the problem????

HTML HERE:

<div id="answer-box container">

<div class="row">
  <div id="answer-one" class="answer col-md-4" data-bind="click: function() { answerQuestion(0, $element.id) }">
    <span class="big-text">A. </span><span data-bind="text: getAnswerText(0)" class="anshover"></span>
    </div>
<div id="answer-two" class="answer col-md-4" data-bind="click: function() { answerQuestion(1, $element.id) }">
    <span class="big-text">B. </span><span data-bind="text: getAnswerText(1)"></span>
</div>
</div>

<div class="row">
<div id="answer-three" class="answer col-md-4" data-bind="click: function() { answerQuestion(2, $element.id) }">
    <span class="big-text">C. </span><span data-bind="text: getAnswerText(2)"></span>
</div>
<div id="answer-four" class="answer col-md-4" data-bind="click: function() { answerQuestion(3, $element.id) }">
    <span class="big-text">D. </span><span data-bind="text: getAnswerText(3)"></span>
</div>
</div>

</div>

CSS HERE:

.answer:hover {
    text-decoration: none;
    cursor: pointer;
    background: #FF7E00;
}

JS HERE:

self.rightAnswer = function(elm) {
    $("#" + elm).slideUp('slow', function() {
        startSound('rightsound', false);
        $("#" + elm).css('background', 'green').slideDown('slow', function() {
            self.money($(".active").data('amt'));
            if(self.level() + 1 > 15) {
                $("#game").fadeOut('slow', function() {
                    $("#game-over").html('You Win!');
                    $("#game-over").fadeIn('slow');
                });
            } else {
                self.level(self.level() + 1);
                $("#" + elm).css('background', 'none');
                $("#answer-one").show();
                $("#answer-two").show();
                $("#answer-three").show();
                $("#answer-four").show();
                self.transitioning = false;
            }
        });
    });
}
Muhammad Danish
  • 17
  • 4
  • I have added HTML code...now can u tell me wheres the problem is??/ – Muhammad Danish Jun 04 '16 at 09:53
  • if you're setting a background style directly on the element, then it most likely be in higher priority than the CSS `:hover` background style. You can add `!important` in the CSS to the hover background (`background: #FF7E00 !important;`), or add class to the elements (That sets the background color), instead of setting the style with jQuery's `.css()` – Alon Eitan Jun 04 '16 at 10:01
  • You right. But their is a little problem again, applying jquery(hover) property but not able to put background image properly. Can you help me out – Muhammad Danish Jun 04 '16 at 10:34
  • CODE IS: $("#" + elm).hover(function(){ // $(this).css("background", "#FF7E00"); // }, function(){ // $(this).css("background","url('../img/2.png') no-repeat 0 0;"); // }); – Muhammad Danish Jun 04 '16 at 10:35
  • Read this - http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property – Alon Eitan Jun 04 '16 at 12:03

0 Answers0