javascript - hover on table to change another element style with jquery, works for only 1 mil second -


i want text underlined when hovering area of table.

here's code, works 1 mil second , underline fades away though cursor inside table (tried both go , foo test):

js:

<script> $(document).ready(function(){ $(function(){     $('.foo').mouseenter(function(){         $(".vvv").addclass('altbg')     }).mouseout(function(){         $(".vvv").removeclass('altbg')     }); }); }) </script>

css:

.altbg {     text-decoration:underline; }

html:

<div class="go"> <table border="1" class="foo">         <col style="width:115px;" />         <col style="width:280px;" />         <col style="width:125px;" />         <col style="width:145px;" />         <col style="width:125px;" />         <col style="width:230px;" />           <tr>             <td>0</td>             <td>1</td>             <td>2</td>             <td>3</td>             <td>4</td>             <td>5</td>           </tr></table> </div> <div class="vvv">hello</div>

edit: second related question:

i want text color change when hovering table, though color defined id.

besides changing id class, how can make div change it's color?

maybe in script needs change in order specify class selector, don't know how it.

js:

<script> $(document).ready(function(){ $(function(){     $('td').mouseenter(function(){         $(".vvv").addclass('altbg')     }).mouseout(function(){         $(".vvv").removeclass('altbg')     }); }); }) </script>

css:

#meh {color:red}  .altbg {     text-decoration:underline;     color:blue; }

html:

<div class="go"> <table border="1" class="foo">         <col style="width:115px;" />         <col style="width:280px;" />         <col style="width:125px;" />         <col style="width:145px;" />         <col style="width:125px;" />         <col style="width:230px;" />           <tr>             <td>0</td>             <td>1</td>             <td>2</td>             <td>3</td>             <td>4</td>             <td>5</td>           </tr></table> </div> <div id="meh" class="vvv">hello</div>

it's not time of hover, location of mouse makes not appear longer. reason targeting table's class not work, instead have target td element inside of it:

$(document).ready(function () {      $(function () {          $('td').mouseenter(function () {              $(".vvv").addclass('altbg')          }).mouseout(function () {              $(".vvv").removeclass('altbg')          });      });  })
.altbg {      text-decoration:underline;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="go">      <table border="1" class="foo">          <col style="width:115px;" />          <col style="width:280px;" />          <col style="width:125px;" />          <col style="width:145px;" />          <col style="width:125px;" />          <col style="width:230px;" />          <tr>              <td>0</td>              <td>1</td>              <td>2</td>              <td>3</td>              <td>4</td>              <td>5</td>          </tr>      </table>  </div>  <div class="vvv">hello</div>

here jsfiddle demo: http://jsfiddle.net/0uqboeat/ too.


Comments

Post a Comment

Popular posts from this blog

Python Kivy ListView: How to delete selected ListItemButton? -

Image
i'm trying learn kivy building simple todo-list app suggested dusty phillips, author of book "creating apps in kivy". this code far: from kivy.app import app kivy.uix.boxlayout import boxlayout kivy.properties import objectproperty kivy.uix.listview import listitembutton class taskbutton(listitembutton): pass class todoroot(boxlayout): task_input = objectproperty() task_list = objectproperty() def add_task(self): self.task_list.adapter.data.extend([self.task_input.text]) self.task_list._trigger_reset_populate() def del_task(self): pass class todoapp(app): def build(self): return todoroot() if __name__ == '__main__': todoapp().run() and kv file: #: import main todo #: import listadapter kivy.adapters.listadapter.listadapter #: import listitembutton kivy.uix.listview.listitembutton todoroot: <todoroot>: orientation: "vertical" task_input: task_input_view t...
Read more

asp.net mvc 4 - A specified Include path is not valid. The EntityType '' does not declare a navigation property with the name '' -

i wonder if help. above error when call .include() . breaks when include tblmemberships . this.dbcontext.configuration.lazyloadingenabled = false; list<tblcustomerinfo> customers = this.dbcontext.tblcustomerinfoes.include("tblusers").include("tblmemberships").tolist(); the reason because navigation property between tblcustomerinfo , tblmemberships not exist. tblusers link between other 2 tables. customer -- 1:* -- user -- 1:* -- membership (sorry, can't include image reputataion < 10). my questions are: what need in order have tblmemberships included? is recommended way of retrieve data or should break 2 queries? or design totally rubbish? i using ef5, asp .net mvc 4 kindly advise. thank you. when write code this: db.parenttable .include("childtable") .include("childofchildtable"); you saying include entries childtable keyed parenttable , include entries childofchildtable keyed paren...
Read more