Javascript: список раскрывающихся кнопок.Onmousover показать описание кнопки на правой стороне - PullRequest
Новая
       34

Javascript: список раскрывающихся кнопок.Onmousover показать описание кнопки на правой стороне

0 голосов
/ 22 мая 2018

У меня есть список кнопок и кнопок с выпадающим меню.
Когда я помещаю свою мышь над каждой кнопкой, она показывает краткое описание кнопки внизу списка (см. Пример).

Теперь работает только для кнопок первого уровня, но не для элементов раскрывающегося списка.

В итоге , я бы хотел:

  1. Показать описание (onmouseover) каждого элемента в ПРАВО из списка, как показано на рисунке (не внизу, как сейчас)

  2. Показать описание (onmouseover) не только для кнопок первого уровня, но и для элементов в раскрывающихся списках.

Я был бы очень благодарен зарабочий раствор.

Please click to see the image for layout

.element-1,
.element-2,
.element-3 {
  display: none;
}

.a-1:hover~.element-1 {
  display: block;
}

.a-2:hover~.element-2 {
  display: block;
}

.a-3:hover~.element-3 {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
  <font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
  <button title="Description 1" class="a-1" id="menu1" onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 68px;">Button 1</button>
  <div align="left" class="dropdown" style="width: 333px; height: 34px;">
    <button class="btn btn-default dropdown-toggle" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1 
         <span class="caret"></span></button>
    <ul title="Drop-down item 1 description" class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="a-2" role="presentation">
        <a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a></li>
      <li title="Drop-down item 2 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3 
         <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li title="drop-down item 3 description" class="a-2" role="presentation">
        <a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a></li>
      <li title="drop-down item 4 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a></li>
      <li title="drop-down item 5 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a></li>
      <li title="drop-down item 6 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a></li>
      <li title="Drop-down item 7 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a></li>
    </ul>
  </div>
  <button title="Button 4 description" class="a-2" id="menu1" onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
    onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 34px;">Button 5 </button>&#160;&#160;&#160;&#160;&#160;&#160;
  <div class="element-1" style="width: 350px;">
    <img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
    <br/>Button 1 description</div>
  <div class="element-2" style="width: 350px;">Button 4 description</div>
  <div class="element-3" style="width: 350px;">Button 5 description</div>
</div>

1 Ответ

0 голосов
/ 22 мая 2018

Я переместил элементы описания сразу после их кнопок.
Затем я добавил класс description, чтобы легко настроить таргетинг на все описания div s,
и еще одно, descripted, чтобы легко настроить таргетинг на все кнопки с описанием…

Добавьте немного CSS, и все: 

.container {
  /* Added for visibility */
  background: #eee;
}

.description {
  display: none;
  /* The absolute positioning refers to the container. */
  position: absolute;
  transform: translate(100%, -100%);
}

.descripted:hover+.description {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
  <font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
  <button title="Description 1" class="a-1 descripted" id="menu1" onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 68px;">Button 1</button>
  <div class="description" style="width: 350px;">
    <img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
    <br/>Button 1 description
  </div>
  <div align="left" class="dropdown" style="width: 333px; height: 34px;">
    <button class="btn btn-default dropdown-toggle descripted" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1<span class="caret"></span></button>
    <div class="description" style="width: 350px;">
      <img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
      <br/>Drop-Down 1 description
    </div>

    <ul title="Drop-down item 1" class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="a-2 descripted" role="presentation">
        <a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a>
      </li>
      <div class="description" style="width: 350px;">
        <img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
        <br/>Drop-Down item 1 description
      </div>
      <li class="descripted" title="Drop-down item 2" role="presentation">
        <a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a>
      </li>
      <div class="description" style="width: 350px;">
        <img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
        <br/>Drop-Down item 2 description
      </div>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li title="drop-down item 3 description" class="a-2" role="presentation">
        <a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a>
      </li>
      <li title="drop-down item 4 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a>
      </li>
      <li title="drop-down item 5 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a>
      </li>
      <li title="drop-down item 6 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a>
      </li>
      <li title="Drop-down item 7 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a>
      </li>
    </ul>
  </div>
  <button title="Button 4 description" class="a-2" id="menu1" onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
    onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 34px;">Button 5 </button>&#160;&#160;&#160;&#160;&#160;&#160;
</div>

Я сделал это только на 2 первых кнопках, но вы поняли!
Не стесняйтесь комментировать, если вы хотите внести некоторые изменения.

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

...