Как показать / скрыть div при наведении указателя на c фигуру? - PullRequest
Новая
       5

Как показать / скрыть div при наведении указателя на c фигуру?

0 голосов
/ 21 апреля 2020

Я пытаюсь показать или скрыть элемент div, когда наводю указатель мыши на определенный c элемент фигуры. Для уточнения c: я пытаюсь добиться следующего:

  1. Когда я наведите курсор на кнопку # 1, я хочу показать div с текстом для кнопки 1;
  2. При наведении курсора на кнопку № 2 я хочу показать элемент div с текстом для кнопки 2;
  3. и т. Д. ...

enter image description here

Прежде всего, я попытался воспроизвести простой пример (этот пример работает): 

<!DOCTYPE html>
<html>
<head>
<style>
.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}
</style>
</head>
<body>

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

</body>
</html>

Однако я не могу выполнить эту работу с моей стороны. У кого-нибудь есть идеи, как я могу применить этот пример к структуре HTML ниже? К вашему сведению: классы в этом сценарии используются в качестве манекенов для описания того, чего я пытаюсь достичь. 

<div>
  <div>
    <section>
      <figure>
        <i class="hover pin 1">1</i>
        <i class="hover pin 2">2</i>
        <i class="hover pin 3">3</i>
        <i class="hover pin 4">4</i>
      </figure>
    </section>
  </div>			
  <div class="hide when not equal to hover item 1">
    <h3>Text item 1</h3>
  </div>
  <div class="hide when not equal to hover item 2">
    <h3>Text item 2</h3>
  </div>
  <div class="hide when not equal to hover item 3">
    <h3>Text item 3</h3>
  </div>
  <div class="hide when not equal to hover item 4">
    <h3>Text item 4</h3>
  </div>
</div>

С уважением,

Joris

Ответы [ 3 ]

1 голос
/ 21 апреля 2020

Хотя я полагаю, что для этой цели вы можете использовать просто CSS, гораздо проще применить JS на практике для достижения желаемого результата.

В приведенном ниже фрагменте показано использование JavaScript решение, использующее onmouseover и onmouseout . 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .PinDiv{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <section>
                <figure>
                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv1').style.display='block';" onmouseout="document.getElementById('PinDiv1').style.display='none';">1</i>
                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv2').style.display='block';" onmouseout="document.getElementById('PinDiv2').style.display='none';">2</i>
                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv3').style.display='block';" onmouseout="document.getElementById('PinDiv3').style.display='none';">3</i>
                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv4').style.display='block';" onmouseout="document.getElementById('PinDiv4').style.display='none';">4</i>
                </figure>
            </section>
        </div>            
        <div id="PinDiv1" class="PinDiv">
            <h3>Text item 1</h3>
        </div>
        <div id="PinDiv2" class="PinDiv">
            <h3>Text item 2</h3>
        </div>
        <div id="PinDiv3" class="PinDiv">
            <h3>Text item 3</h3>
        </div>
        <div id="PinDiv4" class="PinDiv">
            <h3>Text item 4</h3>
        </div>
    </div>
</body>
</html>

Используя JQuery, мы можем немного это исправить: 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .PinDiv{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <section>
                <figure>
                    <i class="HoverPin" onmouseover="$('#PinDiv1').css('display','block');" onmouseout="$('#PinDiv1').css('display','none');">1</i>
                    <i class="HoverPin" onmouseover="$('#PinDiv2').css('display','block');" onmouseout="$('#PinDiv2').css('display','none');">2</i>
                    <i class="HoverPin" onmouseover="$('#PinDiv3').css('display','block');" onmouseout="$('#PinDiv3').css('display','none');">3</i>
                    <i class="HoverPin" onmouseover="$('#PinDiv4').css('display','block');" onmouseout="$('#PinDiv4').css('display','none');">4</i>
                </figure>
            </section>
        </div>            
        <div id="PinDiv1" class="PinDiv">
            <h3>Text item 1</h3>
        </div>
        <div id="PinDiv2" class="PinDiv">
            <h3>Text item 2</h3>
        </div>
        <div id="PinDiv3" class="PinDiv">
            <h3>Text item 3</h3>
        </div>
        <div id="PinDiv4" class="PinDiv">
            <h3>Text item 4</h3>
        </div>
    </div>
</body>
</html>

Если вы хотите, чтобы они оставались открытыми, вы могли бы сделать что-то вроде этого: 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .PinDiv{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <section>
                <figure>
                    <i class="HoverPin" onmouseover="$('#PinDiv1').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv1)').css('display','none');">1</i>
                    <i class="HoverPin" onmouseover="$('#PinDiv2').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv2)').css('display','none');">2</i>
                    <i class="HoverPin" onmouseover="$('#PinDiv3').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv3)').css('display','none');">3</i>
                    <i class="HoverPin" onmouseover="$('#PinDiv4').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv4)').css('display','none');">4</i>
                </figure>
            </section>
        </div>            
        <div id="PinDiv1" class="PinDiv">
            <h3>Text item 1</h3>
        </div>
        <div id="PinDiv2" class="PinDiv">
            <h3>Text item 2</h3>
        </div>
        <div id="PinDiv3" class="PinDiv">
            <h3>Text item 3</h3>
        </div>
        <div id="PinDiv4" class="PinDiv">
            <h3>Text item 4</h3>
        </div>
    </div>
</body>
</html>
1 голос
/ 21 апреля 2020

Если вы не хотите использовать JS (другой опубликованный ответ будет работать), вы можете использовать селектор :target. Предостережение: пользователь должен будет нажать на элемент. 

div.text {
  display: none;
}

div:target {
  display: block;
}

.pin {
margin-left: 15px;
}
<div>
  <div>
    <section>
      <figure>
        <a href="#text1" class="pin">1</i>
        <a href="#text2" class="pin">2</i>
        <a href="#text3" class="pin">3</i>
        <a href="#text4" class="pin">4</i>
      </figure>
    </section>
  </div>			
  <div class="text" id="text1">
    <h3>Text item 1</h3>
  </div>
  <div class="text" id="text2">
    <h3>Text item 2</h3>
  </div>
  <div class="text" id="text3">
    <h3>Text item 3</h3>
  </div>
  <div class="text" id="text4">
    <h3>Text item 4</h3>
  </div>
</div>
1 голос
/ 21 апреля 2020

Вы можете попробовать этот быстрый css трюк, чтобы получить то, что вам нужно:)

CSS: 

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

HTML: 

<div style="display: flex">
  <i class="hover pin 1">1
    <div class="hide">
      <h3>Text item 1</h3>
    </div>
  </i>
  <i class="hover pin 2">2
    <div class="hide">
      <h3>Text item 2</h3>
    </div>
  </i>
  <i class="hover pin 3">3
    <div class="hide">
      <h3>Text item 3</h3>
    </div>
  </i>
  <i class="hover pin 4">4
    <div class="hide">
      <h3>Text item 4</h3>
    </div>
  </i>
</div>


.hide {
    display: none;
}

i:hover > .hide {
    display: block;
} 
	<div style="display: flex">
  <i class="hover pin 1">1
    <div class="hide">
      <h3>Text item 1</h3>
    </div>
  </i>
  <i class="hover pin 2">2
    <div class="hide">
      <h3>Text item 2</h3>
    </div>
  </i>
  <i class="hover pin 3">3
    <div class="hide">
      <h3>Text item 3</h3>
    </div>
  </i>
  <i class="hover pin 4">4
    <div class="hide">
      <h3>Text item 4</h3>
    </div>
  </i>
</div>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...