zoukankan      html  css  js  c++  java
  • Highlight On Mouseover Effect With JQuery

    How to get the xpath by clicking an html element

    How to get the xpath by clicking an html element

    Quick Tip: Outline Elements on Hover

    Quick Tip: Outline Elements on Hover

    Highlight On Mouseover Effect With JQuery

    Highlight On Mouseover Effect With JQuery I have seen this effect been used a lot on e-commerce sites or sites with lists in general. I don’t know how they do it exactly but I can show you how I would do it with JQuery. Take a look at the CSS class I made, what it does is it has a gold background color and round corners for Firefox, Safari and Chrome. .highlight-yellow { background-color:#FFD700; -moz-border-radius: 5px; -webkit-border-radius: 5px; } Let’s make the divisions we will highlighting.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
    All I need now is to make a script that adds the CSS class we just made to the divisions when the mouse is on it, when the mouse moves out of the division I will remove the class. $(document).ready(function(){ $(".product").mouseover(function(){ $(this).addClass("highlight-yellow"); }); $(".product").mouseout(function(){ $(this).removeClass("highlight-yellow"); }); }); I don’t think I’ve told you about $(this) in any of my previous tutorials, in short, all $(this) does is refer to the current element on which the event (mouseout or mouseover) is been performed. As always, happy JQuerying!
  • 相关阅读:
    MySQL 内存溢出
    使用pt-fifo-split 工具往mysql插入海量数据
    Summary: Calculate average where sum exceed double limits
    Pocket Gem OA: Log Parser
    Pocket Gem OA: Path Finder
    Leetcode: Sliding Window Median
    Leetcode: Number Complement
    FB面经 Prepare: Even Tree
    FB面经 Prepare: All Palindromic Substrings
    FB面经 Prepare: Largest Island
  • 原文地址:https://www.cnblogs.com/lexus/p/3598832.html
Copyright © 2011-2022 走看看