Как менять стиль CSS элемента в особенности?

У меня есть веб-страница HTML с несколькими элементами, но состоит в том, чтобы просить конечную цель пользователь и password. То, что я пробую реализовать, состоит в том, чтобы, когда у пользователя будет курсор в элементе неудар в лунку электронная почта, посредством css у него появилось сообщение, содержавшее в элементе b: "Пожалуйста набил Ваша электронная почта или пользователь", и когда у пользователя будет курсор в элементе неудар в лунку password, посредством css у него появилось сообщение, содержавшее в элементе b: "Я набил Ваш пароль". Я не считаю позволенным использовать jQuery.

Большое спасибо заранее и привет

Мой код - следующий:

CSS:

input.dx-texteditor-input:focus + .tooltip
{
  opacity: 1;
}  

input.dx-texteditor-input: focus + .tooltip-top-right
{
  right: 0; 
  left: auto; 
  margin-bottom: 5px;
} 

HTML:

<label class="input">
    <i class="icon-append fa fa-lock" style="z-index: 1"></i>
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
        <div class="dx-texteditor-container">
            <input class="dx-texteditor-input" name="email" type="email">
            <div class="dx-placeholder"></div>
            <div class="dx-texteditor-buttons-container">
                <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
                </span>
            </div>
        </div>
    </div>
    <b class="tooltip tooltip-top-right" style="opacity:0">
        <i class="fa fa-user txt-color-teal"></i> Por favor teclee su correo electrónico o usuario
    </b>
</label>  

<label class="input">
    <i class="icon-append fa fa-lock" style="z-index: 1"></i>
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
        <div class="dx-texteditor-container">
            <input class="dx-texteditor-input" name="email" type="email">
            <div class="dx-placeholder"></div>
            <div class="dx-texteditor-buttons-container">
                <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
                </span>
            </div>
        </div>
    </div>
    <b class="tooltip tooltip-top-right" style="opacity:0">
        <i class="fa fa-lock txt-color-teal"></i> Teclee su contraseña
    </b>
</label>  
1
задан 28.08.2016, 16:44
5 ответов

Ты можешь использовать селектор ~ CSS, сочетаемого с :focus

~ это, чтобы выбирать последующий элемент в DOM и :focus чтобы это выбирать, когда <input> имейте фокус. Важное этого селектора (~) дело в том, что элемент, который ты изменяешь, должен быть после элемента, который стреляет в действие (после в DOM).

Как свойство content только функционируй с pseudo элементы, я добавляю :after чтобы мочь показывать сообщение.

Salu2

#identidad:focus ~ #tip:after {
  content: "Escriba su nombre de usuario o direccion de correo electronico";
}

#password:focus ~ #tip:after {
  content: "Escriba su contraseña";
}
<input id="identidad">
<input id="password">
<p id="tip"></p>

заметь: Я удалил остальные стили формата из-за читабельности.

Если ты хочешь два отдельных места, и помещать контент в DOM прямо, только они меняют ids и ты можешь использовать visibility или opacity которую ты можешь сочетать с переходами, чтобы давать ему немного оживления.

#tipPass, #tipId {
  visibility: hidden;
}

#identidad:focus ~ #tipId,
#password:focus ~ #tipPass {
  visibility: visible;
}
<input id="identidad">
<p id="tipId">Escriba su nombre de usuario o direccion de correo electronico</p>
<input id="password">
<p id="tipPass">Escriba su contraseña</p>
2
ответ дан 24.11.2019, 13:32

Он подтверждает, если ты valdrГ - в с нею soluciГіn, что они дают в этой другой нити.

https://stackoverflow.com / questions / 19480010/adding-a-tooltip-to-an-input-box

оставил Тебе здесь прямую ссылку: http://jsfiddle.net/BumU5/3/

0
ответ дан 24.11.2019, 13:32

Это быстрое решение, ты можешь улучшать функцию с parentNode и closest, чтобы делать ее более универсальной.

JAVASCRIPT

function showTooltip(id){
  document.querySelector(id).style.opacity = 1;
}
function hideTooltip(id){
  document.querySelector(id).style.opacity = 0;
}

CSS

.tooltip{
  opacity:0;
}
input.dx-texteditor-input:focus + .tooltip
{
  opacity: 1;
}  

input.dx-texteditor-input: focus + .tooltip-top-right
{
  right: 0; 
  left: auto; 
  margin-bottom: 5px;
} 

HTML

    <label class="input">
    <i class="icon-append fa fa-lock" style="z-index: 1"></i>
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
        <div class="dx-texteditor-container">
            <input onblur="hideTooltip('#tooltip1')" onfocus="showTooltip('#tooltip1')" class="dx-texteditor-input" name="email" type="email">
            <div class="dx-placeholder"></div>
            <div class="dx-texteditor-buttons-container">
                <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
                </span>
            </div>
        </div>
    </div>
    <b id="tooltip1" class="tooltip tooltip-top-right" >
        <i class="fa fa-user txt-color-teal"></i> Por favor teclee su correo electrónico o usuario
    </b>
</label>  

<label class="input">
    <i class="icon-append fa fa-lock" style="z-index: 1"></i>
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
        <div class="dx-texteditor-container">
            <input onblur="hideTooltip('#tooltip2')" onfocus="showTooltip('#tooltip2')" class="dx-texteditor-input" name="email" type="email">
            <div class="dx-placeholder"></div>
            <div class="dx-texteditor-buttons-container">
                <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
                </span>
            </div>
        </div>
    </div>
    <b id="tooltip2" class="tooltip tooltip-top-right">
        <i class="fa fa-lock txt-color-teal"></i> Teclee su contraseña
    </b>

Существует способ это делать с сигарой css, но еще не стандарт и оно было бы нечто похожим, только это идея, я это не протестировал

!.input > input:focus  .tooltip{ opacity:1 }
0
ответ дан 24.11.2019, 13:32

Создавать Tooltips со стилями css Документация.

Практический одинокий пример со стилями css:

[data-tip] {
  position:relative;
}

[data-tip]:before {
  content:'';
  display:none;
  content:'';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #1a1a1a;	
  position:absolute;
  top:30px;
  left:35px;
  z-index:8;
  font-size:0;
  line-height:0;
  width:0;
  height:0;
}

[data-tip]:after {
  display:none;
  content:attr(data-tip);
  position:absolute;
  top:35px;
  left:0px;
  padding:5px 8px;
  background:#1a1a1a;
  color:#fff;
  z-index:9;
  font-size: 0.75em;
  height:18px;
  line-height:18px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  white-space:nowrap;
  word-wrap:normal;
}

[data-tip]:hover:before,
[data-tip]:hover:after {
  display:block;
}
<div data-tip="Por favor teclee su correo electrónico o usuario">
<input type="email" name="email">
</div>

Заметь: Не обязательно это должна быть этикетка div ты можешь remplazar из-за этикетки <label>.

Ты можешь prácticar стили css в консоли браузера (программные средства для разработчиков) и давать им другую функциональность, как ты этого потребовал.

Другой пример:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Привет.

0
ответ дан 24.11.2019, 13:32

Пара вещей:

  • Для того, чтобы оно функционировало, тебе cГіdigo нужно, чтобы составная часть b estГ© я участвовал в рыцарском турнире despuГ©s input (то, что значит селектор прилегающих братьев: elemento1 + elemento 2) применяется к elemento2, которые он идет немедленно despuГ©s elemento1.

  • Вторая вещь состоит, в том, что после того, как считает определенной матовость в HTML, ты нуждаешься в том, чтобы поместить один !important в твой CSS для того, чтобы sobreescriba собственность.

input.dx-texteditor-input:focus + .tooltip {
  opacity: 1 !important;
}

input.dx-texteditor-input:focus + .tooltip-top-right {
  right: 0;
  left: auto;
  margin-bottom: 5px;
}
<label class="input">
  <i class="icon-append fa fa-lock" style="z-index: 1"></i>
  <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
    <div class="dx-texteditor-container">
      <input class="dx-texteditor-input" name="email" type="email">
      <b class="tooltip tooltip-top-right" style="opacity:0">
        <i class="fa fa-user txt-color-teal"></i> Por favor teclee su correo electrónico o usuario
    </b>
      <div class="dx-placeholder"></div>
      <div class="dx-texteditor-buttons-container">
        <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
        </span>
      </div>
    </div>
  </div>

</label>

<label class="input">
  <i class="icon-append fa fa-lock" style="z-index: 1"></i>
  <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
    <div class="dx-texteditor-container">
      <input class="dx-texteditor-input" name="email" type="email">
      <b class="tooltip tooltip-top-right" style="opacity:0">
        <i class="fa fa-lock txt-color-teal"></i> Teclee su contraseña
    </b>
      <div class="dx-placeholder"></div>
      <div class="dx-texteditor-buttons-container">
        <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
        </span>
      </div>
    </div>
  </div>

</label>
0
ответ дан 24.11.2019, 13:32