ReactJS: Hover over button

This entry is part 35 of 35 in the series React JS

See the Pen React hover demo by Smashcat (@naturalclar) on CodePen.

class Icon extends React.Component{
  constructor (props) {
    super(props);
    this.state= {
      hover: false
    };
  }
  
   handleHover() {
    this.setState({hover: !this.state.hover});
  }
  
  render() {
    var iconStyle={
      transform: this.state.hover ? 'translateY(-5px)' : 'none',
      boxShadow: this.state.hover ? '3px 3px 5px #000' : 'none',
      color: this.state.hover? "#fff" : "#aaa",
      background: this.state.hover? '#55acee' :'#222',
      transition: "all .3s",
      borderRadius: '50%',
      height: 50,
      width: 50,
      textAlign:'center',
      lineHeight: '50px'
    }
    return (
      <a href={this.props.href}><i className={this.props.icon} style={iconStyle} onMouseEnter={()=>this.handleHover()} onMouseLeave={()=>this.handleHover()}></i></a>
    )
  };
  
}

class App extends React.Component {
  render() {
    return (
      <Icon href="#" icon="fa fa-2x fa-twitter" />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

CSS3 Selectors: Combining :focus and :hover

This entry is part 20 of 40 in the series CSS3 Selectors

As a demonstration, we can combine :hover and :focus for a text input box.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <style>
        input:focus {
            border: 2px solid red;
        }
        input:hover {
            border: 2px solid green;
        }
    </style>
</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>

CSS3 Selectors: Pseudo class :hover

This entry is part 18 of 40 in the series CSS3 Selectors

There are a few common pseudo classes such as :link, :hover, :visited, :active and :focus.

They are called pseudo as these elements can’t be targeted using the normal html tag.  For example, the hover example below is actually an action.

Let’s look at the simple hover class where a link could be highlighted to a different color when the mouse is over the link.

:hover can apply to any element on the page—not just links and form controls.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com</title>
    <style>
        a:hover {
            color: red;
        }
    </style>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

 

CSS3: Animated image zoom on mouse hover

This entry is part 6 of 13 in the series CSS3

We take a thumbnail photo and animate it to show its full size.

The CSS code here uses a combination of rotate and scale to achieve the animation effects.

This is done without the use of Javascript.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transform</title>
    <style>
        body {
            padding: 100px;
            text-align: center;
        }

        img {
            background: #fff;
            border: 1px solid #BFBFBF;
            display: block;
            float: left;
            height: 125px;
            margin: 0 10px 0 0;
            padding: 5px;
            width: 125px;
            position: relative;
            -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
        }

        img:hover {
            -webkit-transform: rotate(10deg) scale(2);
            -moz-transform: rotate(10deg) scale(2);
            -o-transform: rotate(10deg) scale(2);
            -ms-transform: rotate(10deg) scale(2);
            transform: rotate(10deg) scale(2);
        }
    </style>
</head>
<body>

<img src='https://codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'/>

</body>
</html>

The line

position: relative

means that the image position is relative to its parent tag which is the <body> tag.

With the transition statements in line 21,22,23, the animation will be done in a second.  Without these transition effects, it will move to its final position immediately.

jQuery UI & Accordion: Open On Hoverintent

This entry is part 4 of 7 in the series jQuery UI Accordion

jQuery UI Accordion – Open on hoverintent

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Accordion - Open on hoverintent</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#accordion').accordion({
                event: 'click hoverintent'
            });
        });

        /*
         * hoverIntent | Copyright 2011 Brian Cherne
         * http://cherne.net/brian/resources/jquery.hoverIntent.html
         * modified by the jQuery UI team
         */
        $.event.special.hoverintent = {
            setup: function () {
                $(this).bind('mouseover', jQuery.event.special.hoverintent.handler);
            },
            teardown: function () {
                $(this).unbind('mouseover', jQuery.event.special.hoverintent.handler);
            },
            handler: function (event) {
                var currentX, currentY, timeout,
                        args = arguments,
                        target = $(event.target),
                        previousX = event.pageX,
                        previousY = event.pageY;

                function track(event) {
                    currentX = event.pageX;
                    currentY = event.pageY;
                };

                function clear() {
                    target
                            .unbind('mousemove', track)
                            .unbind('mouseout', clear);
                    clearTimeout(timeout);
                }

                function handler() {
                    var prop,
                            orig = event;

                    if (( Math.abs(previousX - currentX) +
                            Math.abs(previousY - currentY) ) < 7) {
                        clear();

                        event = $.Event('hoverintent');
                        for (prop in orig) {
                            if (!( prop in event )) {
                                event[ prop ] = orig[ prop ];
                            }
                        }
                        // Prevent accessing the original event since the new event
                        // is fired asynchronously and the old event is no longer
                        // usable (#6028)
                        delete event.originalEvent;

                        target.trigger(event);
                    } else {
                        previousX = currentX;
                        previousY = currentY;
                        timeout = setTimeout(handler, 100);
                    }
                }

                timeout = setTimeout(handler, 100);
                target.bind({
                    mousemove: track,
                    mouseout: clear
                });
            }
        };
    </script>
</head>
<body>

<div id='accordion'>
    <h3>Section 1</h3>

    <div>
        <p>
            Content of section 1.
        </p>
    </div>
    <h3>Section 2</h3>

    <div>
        <p>
            Content of section 2.
        </p>
    </div>
    <h3>Section 3</h3>

    <div>
        <p>
            Content of section 3.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>

    <div>
        <p>
            Content of section 4A.
        </p>

        <p>
            Content of section 4B.
        </p>
    </div>
</div>


</body>
</html>
Try The Code