Как сделать div с: наведите указатель мыши на состояние зависания?

Я не совсем уверен, как задать этот вопрос, но в основном, у меня есть div с кнопкой с некоторым: зависанием в CSS, однако, я хочу, чтобы при нажатии кнопки он оставался на зависании, это возможно?Как сделать div с: наведите указатель мыши на состояние зависания?

Мой код

#englishbutton { 
 
    width:200px; 
 
    height:50px; 
 
    font-family: 'Raleway', sans-serif; 
 
    margin:0px 20px 20px 20px; 
 
    border:none; 
 
    outline:none; 
 
    background-color:#F16D71; 
 
    color:#FFFFFF; 
 
    transition: .3s background-color; 
 
    text-align:center; 
 
    font-size:20px; 
 
    border-radius:15px; 
 
} 
 

 
#englishbutton:hover { 
 
    background-color:#F5999C; 
 
    color:#FFFFFF; 
 
    cursor:pointer; 
 
}

<div id="actionsection"> 
 
     <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH"> 
 
</div>

Я попытался найти подобные вопросы и один из них сказал, чтобы использовать: фокус состояние, но он не работает, любая помощь будет намного appreicated!

источник

2017-01-31 Eden Chew

Есть множество способов сделать это:

Вы можете использовать :focus:

#englishbutton { 
 
    width:200px; 
 
    height:50px; 
 
    font-family: 'Raleway', sans-serif; 
 
    margin:0px 20px 20px 20px; 
 
    border:none; 
 
    outline:none; 
 
    background-color:#F16D71; 
 
    color:#FFFFFF; 
 
    transition: .3s background-color; 
 
    text-align:center; 
 
    font-size:20px; 
 
    border-radius:15px; 
 
} 
 

 
#englishbutton:hover, #englishbutton:focus { 
 
    background-color:#F5999C; 
 
    color:#FFFFFF; 
 
    cursor:pointer; 
 
}

<div id="actionsection"> 
 
    <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH"> 
 
</div>

Использование jQuery вы можете добавить фон на click кнопки с помощью css() способ:

$('#englishbutton').on('click', function(){ 
 
    $(this).css('background', '#F5999C'); 
 
});

#englishbutton { 
 
    width:200px; 
 
    height:50px; 
 
    font-family: 'Raleway', sans-serif; 
 
    margin:0px 20px 20px 20px; 
 
    border:none; 
 
    outline:none; 
 
    background-color:#F16D71; 
 
    color:#FFFFFF; 
 
    transition: .3s background-color; 
 
    text-align:center; 
 
    font-size:20px; 
 
    border-radius:15px; 
 
} 
 

 
#englishbutton:hover { 
 
    background-color:#F5999C; 
 
    color:#FFFFFF; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="actionsection"> 
 
    <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH"> 
 
</div>

Или вы можете использовать addClass() метод, чтобы добавить стилизованную активный класс, как это:

$('#englishbutton').on('click', function() { 
 
    $(this).addClass('active'); 
 
});

#englishbutton { 
 
    width: 200px; 
 
    height: 50px; 
 
    font-family: 'Raleway', sans-serif; 
 
    margin: 0px 20px 20px 20px; 
 
    border: none; 
 
    outline: none; 
 
    background-color: #F16D71; 
 
    color: #FFFFFF; 
 
    transition: .3s background-color; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    border-radius: 15px; 
 
} 
 
#englishbutton:hover, #englishbutton.active { 
 
    background-color: #F5999C; 
 
    color: #FFFFFF; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="actionsection"> 
 
    <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH"> 
 
</div>

источник

2017-01-31 14:15:23 Ionut

Это странно, несмотря на то, что показывает, что его работы с помощью: фокус здесь, он не работает в моем коде , Будет ли причина, почему это может произойти? –

@EdenChew, может быть, в вашем коде вы делаете что-то не так. Может быть, селектор ошибается. Или 'css' для этого перезаписывается другим правилом' css'. Это может быть много. Попробуйте код из моего ответа в новом отдельном файле в том же месте, где у вас есть проект, и посмотрите, работает ли он. – Ionut

div:active

остаться только при щелчке мыши,

использования

div:focus

вместо

источник

2017-01-31 14:16:08

Если вы хотите, чтобы внешний вид, чтобы остаться после того, как пользователь щелкает в другом месте на странице (<input> элемента и т.д.) вы можете задать класс при щелчке на кнопке, и использовать его для укладки:

var el = $('#englishbutton'); 
 

 
el.click(
 
    function() { 
 
    el.addClass('clickedbutton'); 
 
    } 
 
);

#englishbutton { 
 
    width: 200px; 
 
    height: 50px; 
 
    font-family: 'Raleway', sans-serif; 
 
    margin: 0px 20px 20px 20px; 
 
    border: none; 
 
    outline: none; 
 
    background-color: #F16D71; 
 
    color: #FFFFFF; 
 
    transition: .3s background-color; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    border-radius: 15px; 
 
} 
 

 
#englishbutton:hover, 
 
#englishbutton.clickedbutton { 
 
    background-color: #F5999C; 
 
    color: #FFFFFF; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="actionsection"> 
 
    <input name="englishbutton" type="button" id="englishbutton" value="ENGLISH"> 
 
</div> 
 

 
<input value="Focus here after clicking" />

источник

2017-01-31 14:34:54

Вы также можете сделать это с помощью JavaScript, чтобы изменить сделать парения форматирование OnClick как

<style> 
     .englishbutton { 
     width: 200px; 
     height: 50px; 
     font-family: 'Raleway', sans-serif; 
     margin: 0px 20px 20px 20px; 
     outline: none; 
     background-color: #F16D71; 
     color: #FFFFFF; 
     transition: .3s background-color; 
     text-align: center; 
     font-size: 20px; 
     border-radius: 15px; 
    } 
    .englishbutton:hover { 
    background-color: #F5999C; 
    color: #FFFFFF; 
    cursor: pointer; 
    } 
</style> 
<div> 
    <input id="button" type="button" class="englishbutton" value="ENGLISH" onclick="var s= document.getElementById('button'); 
s.style.backgroundColor='#F5999C';x.style.color='#ffffff'; 
" /> 
</div>

источник

2017-01-31 15:03:50 kampangala

Как сделать div с: наведите указатель мыши на состояние зависания?

ответ

Смежные вопросы