почему мой первый эффект перехода отменяется моим вторым эффектом перехода?

Question

Я создал эффект перехода в моем .speech-bubble, чтобы приглашение «щелкнуть для копирования текста» исчезало при наведении на кнопку копирования, и оно работало и исчезало до тех пор, пока я не добавил второй эффект перехода в свой файл. код в .button:hover + .speech-bubble, и этот код создаст эффект перехода при нажатии кнопки копирования. Но когда я добавил это второе приглашение в первом исчезает в одном перестало работать. Буду очень признателен за помощь в том, как это исправить, спасибо за чтение, мой код ниже.

function myFunction(){
  var text = document.getElementById('input').value;
  var textArray = text.split(" ").sort();
  var output= document.getElementById('output');
  output.value = textArray.toString().replace(/,/g," ");
}

function maFunction(el) { //update : el
  //el.classList.add('clicked');// update 
  document.getElementById('foo').innerHTML = 'text copied!';
  document.getElementById("foo").classList.add("mystyle");
  var copyText = document.getElementById("output");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
}

function right() {
  document.getElementById('foo').innerHTML = 'click to copy text';
  document.getElementById("foo").classList.replace("mystyle","ok");
}

/*function ok() {
  document.getElementById("copied").innerHTML = "Hello World";
}
*/

/*function fadeOut(){
 location.href='index.html#open-modal';
 setTimeout(function () {
     location.href='index.html#modal-close';
     }, 1000);
}*/

body {
    margin-top: 10px;
    margin-left: 20px;
    display: flex;
}

.form {
    margin-right: 20px;
    background: #ffffff;
    position: relative;
    
}

 .input {
    height: 700px;
    width: 600px;
    margin-top: 15px;
    outline: none;
    font-size: 26px;
    resize: none;
    border-style: solid;
    border-color: #4CAF50;
    border-width: 2px;
    outline: none;
    border-radius: 10px;
    margin-top: 0px;
    padding-top: 5px;
    padding-left: 10px;
}

.otput {
    height: 695px;
    width: 620px;
    outline: none;
    resize: none;
    border-style: solid;
    border-color: #4CAF50;
    border-width: 2px;
    border-radius: 10px;
    outline: none;
    margin-left: 10px;
}

 .output {
    height: 650px;
    width: 512px;
    outline: none;
    font-size: 26px;
    resize: none;
    outline: none;
    border: none;
    padding: 0px;
    margin-top: 5px;
    margin-left: 10px;
}

.button {
    background: #4CAF50;
    border: none;
    outline: none;
    color: #ffffff;
    padding: 14px;
    width: 100px;
    border-radius: 0 10px;
    /*margin-left: 1134px;*/
    font-size: 22px;
    cursor: pointer;
    position: absolute;
}

.speech-bubble {
    height: 25px;
    width: 170px;
    color: white;
    font-size: 22px;
    text-align: left;
	position: relative;
	background: #4CAF50;
    border-radius: 1px;
    padding: 5px 10px 5px 5px;
    box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*display: none;*/
    margin-top: 35px;
    margin-left: 630px;
    transform: translateY(-690px);
    opacity: 0;
    /*my first transition effect*/
    transition: opacity 200ms
}
.speech-bubble:after {
    content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-right-color: #4CAF50;
	border-left: 0;
	margin-top: -9px;
    margin-left: -9px;
}


.button:hover + .speech-bubble {
    opacity: 1;
    /*my second transition effect*/
    transition: width 100ms;
}

.mystyle {
    width: 120px;
    padding-right: 0px;
}

.button:hover + .speech-bubble:after {
    display: block;
}

::selection {
  color: black;
  background: lightblue;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar:hover {
    width: 20px;
}

::-webkit-scrollbar-thumb {
    background: #888;
}


/*.modal-window {
    position: fixed;
    background-color: rgba(200, 200, 200, 0.75);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal-window:target {
    opacity: 1;
    pointer-events: auto;
}

.modal-window > div {
    width: 170px;
    height: 50px;
    padding: 10px;
    position: relative;
    margin: 10% auto;
    /*padding: 2rem;*/
    /*background: #fff;
    color: #333;
}

.modal-window .copy{
    font-size: 20px;
}*/

<html>
<head>
    <title>alphabetical order machine</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <textarea class="input"  id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>

    <form class="otput">

    <textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>
    <input class="button" id="button" type='button' value="copy" onclick="maFunction(),setTimeout(right, 1000)"><!-- update on onclick -->
    
    <p class="speech-bubble" id="foo">click to copy text</p>
    <!--p class="cop" id="p">text copied to clipoard</p-->
    <!--p id="copied" class="copied"></p-->
    </form>

    <script src="index.js"></script>
</body>
</html>

Я задавал этот вопрос раньше, но он был закрыт, и меня направили на пост, который не ответил на мой вопрос

Answer 1

Если я правильно понимаю вашу проблему, то, что происходит, вы устанавливаете переход на непрозрачность на .speech-bubble (transition: opacity 200ms), который без вашего второго перехода затухает и изменяет прозрачность при наведении курсора. Теперь, когда вы добавляете свой второй переход к .button:hover + .speech-bubble (transition: width 100ms;), это в основном говорит, что игнорируйте любое другое свойство перехода и только переход по ширине. Таким образом, это впоследствии игнорирует ваш первый переход при первоначальном наведении курсора на кнопку копирования.

Теперь, чтобы решить эту проблему, вы можете связать типы переходов. По сути, вместо использования transition: width 100ms; вы можете использовать transition: opacity 200ms, width 100ms;. При этом сохраняется переход к непрозрачности, а также добавляется один для вашей ширины.

Надеюсь, это поможет.