| | |
| | | </div> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 30px">2</button> |
| | | <button class="item item-hide">3</button> |
| | | <button class="item item-hide">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">4#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 30px">2</button> |
| | | <button class="item item-hide">3</button> |
| | | <button class="item item-hide">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">5#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 30px">2</button> |
| | | <button class="item item-hide">3</button> |
| | | <button class="item item-hide">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">6#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">7#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">8#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">9#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">10#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <div id="crn-2" class="machine"></div> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">12#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">13#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | </div> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">15#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | <span class="row-no">16#</span> |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | </div> |
| | | <div class="stock-group"> |
| | | <button class="item item-hide" style="margin-left: 90px">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item item-hide">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | |
| | | } |
| | | |
| | | </script> |
| | | <script> |
| | | const items = document.querySelectorAll('.item-hide') |
| | | items.forEach((item)=> { |
| | | item.addEventListener('mouseenter', function () { |
| | | items.forEach((item)=> { |
| | | item.style.opacity= 0; |
| | | }) |
| | | }) |
| | | item.addEventListener('mouseleave', function () { |
| | | items.forEach((item)=> { |
| | | item.style.opacity= .8; |
| | | }) |
| | | }) |
| | | }) |
| | | </script> |