<template>
    <img :src="isHover ? hover : normal" class="detail_icon"
        @mouseover="isHover = true"
        @mouseleave="isHover = false"
        v-on="$listeners"
    />
</template>

<script>
export default {
    name: 'HoverImage',
    props: {
        normal: {
            type: String,
            required: true
        },
        hover: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            isHover: false
        };
    }
};
</script>

<style scoped>
.detail_icon {
    vertical-align: text-top;
    padding-left: 5px;
    cursor: pointer;
}
</style>
