Изменение фонового цвета выделенной части в всплывающем окне

Я создал всплывающее окно, в котором, если я нажму на изображение вопросительного знака, он сможет создать поле, содержащее список текста. Скрипку для него является here Изменение фонового цвета выделенной части в всплывающем окне

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

Я могу создать окно, содержащее список текста, как показано на fiddle но Я не уверен, как изменить цвет фона текста выбранной части (например: поддержка, контакт, демонстрация).

Например, если выбрать или нажать или указать мышью поддержки то цвет фона из поддержки части текста должен быть оранжевым, а остальные должны быть черными или если я выбираю или нажмите или наведите указатель мыши на Контакт, тогда фоновый цвет остальной части текста должен быть черным с Контакт текст с оранжевым фоном.

Ниже приведен HTML и CSS фрагменты из скрипки:

HTML фрагмент:

<!DOCTYPE html> 
<html> 
<body style="text-align:center"> 

<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<div class="popup" onclick="myFunction()"><img src="https://s27.postimg.org/40rb1a2ir/questionmark2.jpg" alt="homeicon"> 
<div class="popuptext" id="div"> 
    <div><span id="myPopup">Support</span><br/></div> 
    <div><span id="myPopup1">Contact</span><br/></div> 
    <div><span id="myPopup2">Demo</span><br/></div> 
</div> 
</div> 


<script> 
// When the user clicks on div, open the popup 
function myFunction() { 
    var popup = document.getElementById('div'); 
popup.classList.toggle('show'); 
} 
</script> 

</body> 
</html>

CSS Сниппает:

/* Popup container - can be anything you want */ 
.popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

/* The actual popup */ 
.popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #FD8B00; 
    color: #fff; 
    text-align: left; 

    padding:8px 10px 10px 120px; 
    position: absolute; 
    z-index: 1; 
    bottom: -225%; 
    left: -52px; 
    margin-left: -80px; 
} 

/* Popup arrow */ 
.popup .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: -10%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 6px; 
    border-style: solid; 
    border-color:#FD8B00 transparent transparent transparent; 
} 

/* Toggle this class - hide and show the popup */ 
.popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 

/* Add animation (fade in the popup) */ 
@-webkit-keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

@keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity:1 ;} 
}

источник

2016-12-16 Anonymous

Так что мой ответ ниже покажет вам как изменить фоновый цвет при нажатии кнопки. Предположим, что у вас есть код CSS.

#div div.selected { 
    background-color: black; 
}

Затем, когда пользователь нажимает на кнопку, вам необходимо удалить ранее выбранную кнопку и изменить цвет фона в выбранной кнопки. Вы можете достичь этого, используя JQuery код ниже:

$(document).ready(function(){ 
    $('#div div').click(function(){ 
    $('#div div.selected').removeClass('selected'); 
    $(this).addClass("selected"); 
    }); 
});

Вы также можете проверить Fiddle .. Надеюсь, что это помогает ..

источник

2016-12-16 02:28:01

Это, как я буду это делать.

Я повторно создал разметку, чтобы сделать ее лучше. Поскольку элементы - это ссылки (ожидающие ссылок). Я использовал ul li a.

$(document).ready(() => { 
 
    $('#clicker').click(() => { 
 
    $('.dialog-box').fadeToggle();  
 
    }); 
 

 
    $('.dialog-box li').click((e) => { 
 
    var self = e.currentTarget; 
 
    
 
    if(!$(self).hasClass('active')){ 
 
     $('.dialog-box .active').removeClass('active'); 
 
     $(self).addClass('active'); 
 
    } 
 
    }) 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; } 
 

 
body { 
 
    margin: 50px 0 0 200px; 
 
    font-family: sans-serif; } 
 

 
a#clicker { 
 
    margin-left: 80px; } 
 

 
ul.dialog-box { 
 
    list-style: none; 
 
    width: 200px; 
 
    background: #434343; 
 
    position: relative; 
 
    display: none; 
 
    margin-top: 20px; } 
 

 
ul.dialog-box:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -8px; 
 
    left: calc(50% - 5px); 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 8px solid #ff8a00; } 
 

 
ul.dialog-box li { 
 
    padding: 8px 10px; 
 
    cursor: pointer; } 
 

 
ul.dialog-box li:not(:first-child) { 
 
    border-top: 1px solid #787878; } 
 

 
ul.dialog-box li.active { 
 
    background: #ff8a00; } 
 

 
ul.dialog-box li a { 
 
    color: white; 
 
    font-weight: 600; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="clicker">Clicker</a> 
 

 
<ul class="dialog-box"> 
 
    <li class="active"><a>Support</a></li> 
 
    <li><a>Contact</a></li> 
 
    <li><a>Demo</a></li> 
 
</ul>

источник

2016-12-16 02:50:32

Возможно ли, что после нажатия на кликер, то цвет фона (оранжевый) на поддержку, контакты и демо-текст должен отображаться после того, мыши там? Например, если я возьму мышь для поддержки, тогда цвет фона в текстовой части «Поддержка» должен появиться как оранжевый или если я возьму мою мышь, чтобы «связаться», то цвет фона в текстовой части «Контакт» должен появиться как оранжевый и наоборот. –

@shortcut Если это ваш случай. Используйте 'hover' –

Проверьте https: // jsfiddle.net/8vknhace/5/Я пробовал использовать наведение, но, к сожалению, он работает правильно, когда я нажимаю мышь на текстовую часть «Поддержка», но не в текстовой части «Контакт» и «Демо». Кроме того, возможно ли всплывающее окно выйти после нажатия за пределами всплывающего окна? –

Изменение фонового цвета выделенной части в всплывающем окне

ответ

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