Кликабельное изображение появляется при наведении - PullRequest
Новая
       25

Кликабельное изображение появляется при наведении

0 голосов
/ 26 сентября 2018

В настоящее время я хожу по кругу и надеялся, что кто-нибудь сможет помочь.Я пытался использовать этот пост в качестве ссылки , но не могу заставить его работать должным образом.

У меня есть изображение, которое должно иметь такой эффект, что при наведении курсора на определенную частьизображения, что определенный раздел появляется и кликабелен.Поскольку это будет появляться на сайте в интрасети, а я буду предоставлять код и изображения, я хочу самый простой способ.

Я до сих пор пробовал: карту изображений, span, div и неупорядоченный список, у каждого из которых есть свои проблемы, и чем больше я ищу, тем больше я запутываюсь.

Является лучшимспособ вырезать изображение и отображать его при наведении курсора, используя прямой CSS.

РЕДАКТИРОВАНИЕ Спасибо @Nezir. Я отредактировал ваш код ниже, но я не могу заставить изображения сидеть друг на друге.

#main {
	position: relative;
	top: 0;
    right: 0;
	}
    
#innerHover {
    position: absolute;
    top: 296px;
    left: 397px;
    width: 117px;
    height: 117px;
    border-radius: 50%;
    background: #fff;
}

#popupdiv {
    position:absolute;
}

#innerHover #popupdiv{
    display:none;
}

#innerHover:hover #popupdiv{
    position:absolute;
    display:block;
}
<div><img id="main" src="Outcomes.png">
	<span id="innerHover">
		<a ref="web.com.au" alt=""><img id="popupdiv" src="callout.png"/></a>
	</span>
</div>

1 Ответ

0 голосов
/ 26 сентября 2018

Пожалуйста, проверьте этот пример кода: 

        #myImage {
            position: relative;
            background: #0f0;
            width: 100px;
            height:100px;
        }
    
        #innerHover {
            position: absolute;
            top: 50%/**distance from top of image */;
            left:50% /**distance from left of image */;
            width:10px; /**region width*/;
            height:10px /**region height*/;
            overflow:show;
            background:#fff;
        }
        #popupdiv{
            position:relative;
            left:10px;
    
            width:60px;
            height:60px;
        }
        #innerHover #popupdiv{
           display:none;
        }
        #innerHover:hover #popupdiv{
            display:block;
        }
<div id="myImage">
        <div id="innerHover"><div id="popupdiv"><a target="_blank" href="https://www.rubyonrails.ba/"><img src="https://www.rubyonrails.ba/assets/logo-2f7bac89028bb6a84dcfb8f4c2f895e618937222a560620d00f9cdd2ee1c21e0.png"/>  </a> </div></div>
    </div>
...