How to apply the Hover method in my class?

Question

How to apply the Hover method in my class?

Asked 7 years ago

Viewed 39 times

0

I have the following code:

<section class="content-header">
<h1><i class="fa" ng-class="{'fa-tasks': !isCodeError, 'fa-remove': isCodeError}"></i> {{t(title)}}</h1>
<!--<small>{{readonly == true ? t("Somente consulta"): t(actionTitle)}}</small>-->

<ol class="breadcrumb">
    <li><a ui-sref="master.webadmin"><i class="fa fa-dashboard"></i> Dashboard</a></li>
    <!--<li><a ui-sref="instances_edit({id: instance_id, readonly: true})">{{t("Instância")}} {{instance_name}}</a></li>-->
    <li class="active">{{t(actionTitle)}} {{isCodeError ? t("Código de Erros") : t("Código de Eventos")}}</li>
</ol>
</section>

<section class="content">
<div class="box box-primary" ng-hide="data.length === 0">
    <div class="box-header with-border bg bg-grayskull">
        <h3 class="box-title">
            <!--<button ng-disabled="loading || isPermitted('instance', 'c') == false" class="btn btn-primary" ng-click="$state.go('instances_new')"><i class="fa fa-plus"></i></button>-->
            <!--{{t(actionTitle)}}-->
        </h3>

        <div class="box-tools">
            <div class="input-group input-group-sm" style="width: 250px;">
                <input type="text" name="table_search" class="form-control pull-right" ng-model="q"
                       placeholder="{{t('Pesquisar')}}">

                <div class="input-group-btn">
                    <span class="btn btn-default"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
    </div>

    <div class="box-body table-responsive no-padding">
        <table id="tableData" class="table">
            <thead>
            <tr>
                <th class="col-xs-4">{{t("Nome").toUpperCase()}}</th>
                <!-- <th class="col-xs-1">SERVIÇO</th>
                <th class="col-xs-1">PROTOCOLO</th>
                <th class="col-xs-2">INTERFACE</th> -->
                <th class="col-xs-7">{{t("Descrição").toUpperCase()}}</th>
                <!--<th class="col-xs-1 text-center">{{t("Exibir").toUpperCase()}}</th>-->
                <!--<th class="col-xs-1 text-center">-->
                <!--&lt;!&ndash;<span class="glyphicon glyphicon-edit"></span>&ndash;&gt;-->
                <!--{{t("Editar").toUpperCase()}}-->
                <!--</th>-->
                <!--<th class="col-xs-1" style="text-align: center;">{{t("Remover").toUpperCase()}}</th>-->
                <!-- <th class="col-xs-1"></th> -->
                <!--<th width="10"></th>-->
                <th class="col-xs-1">{{t("Ações").toUpperCase()}}</th>
            </tr>
            </thead>
            <tbody>
            <!-- <tr ng-repeat="row in data" ng-click="" ng-class=""> -->
            <tr dir-paginate="row in data | filter:{DESCRIPTION:q} | orderBy: 'ID' | itemsPerPage: linesPerPage">
                <!-- <td class="text-center"><input type="checkbox" ng-model="user.admin"></td> -->
                <td>{{row.CODE | limitTo: 20}}</td>
                <!-- <td>{{getServiceType(row.config_txt.SERVICE.ServiceType)}}</td>
                <td>TCP</td>
                <td>{{row.config_txt.SERVICE.TCPLocalAddress}}</td> -->
                <td>{{row.DESCRIPTION | limitTo: 100}}</td>
                <!--<td class="text-center" ng-show="isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"-->
                <!--ui-sref="coderrors_edit({id:row.ID, readonly:true})"-->
                <!--a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i></a></td>-->

                <!--<td class="text-center" ng-show="!isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"-->
                <!--ui-sref="codevents_edit({id: row.ID, readonly:true})"-->
                <!--a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i></a></td>-->

                <!--&lt;!&ndash;<td class="text-center"><a a-disabled="isPermitted('errors_event', 'u') == false" ui-sref="cod_errors_edit({id : row.ID, readonly:false})"><span class="glyphicon glyphicon-edit"></span></a></td>&ndash;&gt;-->
                <!--<td class="text-center" ng-show="isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"-->
                <!--ui-sref="coderrors_edit({id:row.ID, readonly:false})"-->
                <!--a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i></a></td>-->

                <!--<td class="text-center" ng-show="!isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"-->
                <!--ui-sref="codevents_edit({id:row.ID, readonly:false})"-->
                <!--a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i></a></td>-->

                <!--<td class="text-center"><a ng-class="{'text-gray': isPermitted('error_events', 'd') == false || row.NAME === 'Admin' }"-->
                <!--a-disabled="isPermitted('error_events', 'd') == false || row.NAME === 'Admin'"-->
                <!--ng-click="$emit('remove', { id: row.ID, index: $index, data: data })"-->
                <!--style="cursor: pointer;" title="{{t('Remover registro')}} '{{row.CODE}}'?"><i-->
                <!--class="fa fa-remove" style="color: #888;font-size: 15px;"></i></a></td>-->


                <td ng-show="isCodeError" class="col-xs-3 text-left dropdown">
                    <div class="btn-group">
                        <a href="#" class="btn bg-gray dropdown-toggle" id="dropdownMenuTools1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...
                            <!--<span class="caret"></span>-->
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuTools1">
                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'c') == false }"
                                   a-disabled="isPermitted('error_event', 'c') == false"
                                   ui-sref="master.coderrors_edit({ id: row.ID, isCopy: true})"><i class="fa fa-files-o"></i> {{t("Copiar")}}</a>
                            </li>

                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"
                                   ui-sref="master.coderrors_edit({id:row.ID, readonly:false})"
                                   a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i> {{t("Editar")}}</a>
                            </li>

                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"
                                   ui-sref="master.coderrors_edit({id:row.ID, readonly:true})"
                                   a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i> {{t("Exibir")}}</a>
                            </li>

                            <li role="separator" class="divider"></li>

                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'd') == false || row.NAME === 'Admin' }"
                                   a-disabled="isPermitted('error_event', 'd') == false || row.NAME === 'Admin'"
                                   ng-click="$emit('remove', { id: row.ID, index: $index, data: data })"
                                   style="cursor: pointer;" title="{{t('Remover registro')}} '{{row.CODE}}'?"><i
                                        class="fa fa-remove text-danger"></i> {{t("Remover")}}</a>
                            </li>
                        </ul>
                    </div>
                </td>

                <td ng-show="!isCodeError" class="col-xs-3 text-left dropdown">
                    <div class="btn-group">
                        <a href="#" class="btn bg-gray dropdown-toggle" id="dropdownMenuTools2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...
                            <!--<span class="caret"></span>-->
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuTools2">
                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'c') == false }"
                                   a-disabled="isPermitted('error_event', 'c') == false"
                                   ui-sref="master.codevents_edit({ id: row.ID, isCopy: true})"><i class="fa fa-files-o"></i> {{t("Copiar")}}</a>
                            </li>

                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"
                                   ui-sref="master.codevents_edit({id:row.ID, readonly:false})"
                                   a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i> {{t("Editar")}}</a>
                            </li>

                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"
                                   ui-sref="master.codevents_edit({id: row.ID, readonly:true})"
                                   a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i> {{t("Exibir")}}</a>
                            </li>

                            <li role="separator" class="divider"></li>

                            <li>
                                <a ng-class="{'text-gray': isPermitted('error_event', 'd') == false || row.NAME === 'Admin' }"
                                   a-disabled="isPermitted('error_event', 'd') == false || row.NAME === 'Admin'"
                                   ng-click="$emit('remove', { id: row.ID, index: $index, data: data })"
                                   style="cursor: pointer;" title="{{t('Remover registro')}} '{{row.CODE}}'?"><i
                                        class="fa fa-remove text-danger"></i> {{t("Remover")}}</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            </tbody>
        </table> <!-- grid -->
    </div>
    <div class="box-footer bg bg-grayskull">
        <div class="form-group">
            <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="js/app_core/views/dirPagination.tpl.html"></dir-pagination-controls>
        </div>
    </div>
</div>

<msg type="info" message="{{t('Não há registros a serem exibidos')}}." condition="data.length == 0"></msg>

And I need to apply the Hover event to trigger the mouseenter and mouseleave events. How do I do this?

2 answers

Browser other questions tagged html hover

You are not signed in. Login or sign up in order to post.

by Wilson Rosa Gomes • **594** points · Answer 1 · 2017-11-10T14:20:35+00:00

I did not understand your code in relation to your question, but it follows an example:

$('div.classe').on({
    mouseenter : function(){ /* ação do evento */  }
    ,mouseleave : function(){ /* ação do evento */  }
});

$('div.classe').on('hover',function(){ /* ação do evento */ });

$('div.classe').hover(function(){ /* ação do evento */ });

by Aléxia • **305** points · Answer 2 · 2017-11-10T20:01:29+00:00

I was able to solve it this way:

 <table id="tableData" class="table table-hover">

Modified in row 33