javascript - 将鼠标悬停在每个复选框中

Question

更新了这个问题，因为我之前的代码与 bootstrap 发生了冲突

嗨，我正在尝试将鼠标悬停在每个复选框中。我现在所拥有的是悬停发生在每个复选框中。当我单击复选框时，您会看到一个下拉列表。但是当我点击远离下拉列表时。然后插入符号箭头应该消失，但不幸的是它没有消失。我也记录了自己的情况，以便更清楚地向您展示我真正想要的东西:

还更新了视频，因为我更新的代码在浏览器中以不同方式显示复选框

链接:https://www.youtube.com/watch?v=i6-T9wjNZY8&feature=youtu.be

这是我当前拥有的代码，位于index.blade.php中:

  @extends('user._layouts.user')

@section('content')
<style>
      .dropdown .caret{
            display:none;
      }

      .dropdown:hover .caret,  .dropdown.opened .caret{
            display:inline-block;
      }
</style>
<script>
    var resetSel = function(){

    };

    $(document).ready(function () {

        $('dropdown').on('click', function (e) {

            e.preventDefault();

            $('.dropdown.opened').removeClass('opened');
        });

          $('.dropdown').click(function(e){

            var $this = $(this);

            $('.dropdown.opened').removeClass('opened');

             if(!$this.hasClass('opened'))
                $this.addClass('opened');

            //alert($check.attr('checked'));
        });

        $('.check').click(function(e){
             e.stopPropagation();
        });


});
</script>

<script>
function toggle(source) {
  checkboxes = document.getElementsByClassName('check');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

@include('user._layouts.template_search')
<h1>Offerte overzicht</h1>
{{--link_to_route('user.orders.create', 'Create new Order')--}} 
@if (count($orders)) 
<ul>
    <div class="row">
        <div class="col-md-1">STATUS</div>
        <div class="col-md-3">offerte naam</div>
        <div class="col-md-3">klant</div>
        <div class="col-md-1">bedrag</div>
        <div class="col-md-1">old delete</div>
        <div class="col-md-1">Check all
            <br>
            <div class="btn-group">
<div class="dropdown">
    <button id="selDelete" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <input id="check1" type="checkbox" onClick="toggle(this)" class="check">
        <span class="caret-hover"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
        <li><a href="#">Delete</a></li>
    </ul>
</div>
            </div>

        </div>
    </div>
    @foreach($orders as $order)
    <div class="row">
        <div class="col-md-1">
            <li>
                @if ($order->status=='not submitted')
                <div class="statusRed"></div>
                @elseif ($order->status=='pending')
                <div class="statusOrange"></div>
                @else 
                <div class="statusGreen"></div>
                @endif  
            </li>
        </div>
        <div class="col-md-3">
            <li>
                {{--as a third parameter we need to pass in the orderId, because it needs to be fed to
                our actual user.orders.edit route. --}}
                {{link_to_route('user.orders.edit', $order->order_name, array($order->id))}}    
            </li>
        </div>
        <div class="col-md-3">
            <li>
                {{$order->client['companyName']}}
            </li>
        </div>
        <div class="col-md-1">
            <li>
                &#8364;{{$order->price}}
            </li>
        </div>
        <div class="col-md-1">
            <li>
                {{Form::open(array('route'=>array('user.orders.destroy',$order->id),
                'method'=>'delete','class'=>'destroy'))}}

                {{Form::submit('Delete', array('class' => 'btn btn-default'))}}
                {{Form::close()}}
            </li>
        </div>

        <div class="col-md-1">
            <li>
                <!--ik kan blade niet gebruiken, want hij laat me mijn checkbox altijd op checked staan.-->
                 <div class="dropdown">
                    <button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
                        <input id="check1" name="checkbox[]" type="checkbox" class="check" >
                        <span class="caret-hover caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
                        <li><a href= "{{ route('user.orders.destroy',array( $order->id )) }}" data-method="delete" >Deletey</a></li>

                    </ul>   
                </div>
            </li>
        </div>
    </div>
    @endforeach
</ul>
@endif

@stop

很高兴我在等待您的回复。不管怎样，谢谢你的回答。

Answer 1

您在多个项目中使用了 ID“selDelete”。考虑使用一个类:

class = selDelete

代替您放置的任何标签:

id = selDelete

同样，请确保将所有引用切换到:

#selDelete

进入:

.selDelete

我相信这可以解决您的问题，请先检查一下，希望有所帮助:)