텍스트 이미지를 마우스오버?

나는 작은 상자가 얻으려고 하고 나타나는 경우 마우스 왼쪽 아래에 놓인 이미지의 때는기대어. 상자 안에 다른 페이지로 링크를 있을 수 있다.

[Here] (http://theme-frsch2.tumblr.com/) 은 작은 상자 수 있지만, 내가 원하는 것과 비슷합니다 연결되지 않은 국경 이미지를 삭제합니다.

39, ve, 모든 내용을 # 39 한 i& can& 답을 얻을 수 없다. # 39 쉐퍼드도 don& t want to use 도구팁 고사하고, 모든 사실을 안 자바스크립트 기술. 내가 진정으로 원하는 이 스크램블된 CSS.

또한 이미지 I& 하는 korea. 작동합니까 # 39 m, [여기서요.] (http://silentthemes.tumblr.com)

프로그래밍
image text css mouseover
4일 1월 2013 в 12:15
5 파운드
질문에 대한 의견 (1)
해결책

이는 '에서' 싸이도르망 사용하여 떠 있는 css3.

  • HTML:*
<div id="wrapper">

    <p class="text">text</p>
</div>​
  • CSS:*
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

데모 [HERE] [1].

  • 대신 는 이 같은 결과를 얻을 방법을 사용하여 포함한다.
  • HTML:*
<div id="wrapper">

    <p class="text">text</p>
</div>​
  • CSS:*
#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
  • jquery 번호:*
$('.hover').mouseover(function() {
  $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility","hidden");
});

, 바디입니다 원하는 위치에 있는 jquery 를 넣을 수 있는 코드를 HTML 페이지의 관심용 있는 jquery 라이브러리를 포함시켜야 합니다 헤드입니다 다음과 같습니다.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

[HERE] [2] 데모를 볼 수 있습니다.

정보기술 (it) 을 사용할 경우 웹 사이트에 ',' 그냥 변경하십시오 &lt, img src /&gt 여러 이미지를 추가할 수 있습니다, 그냥 내가 복사합니다를 형식 및 캡션에 가치와 사용합니다. 'p', '와 함께 사용하여 이미지를 삽입하십시오 class = &quot hover&quot class = &quot text"';;

Fabio
편집된 답변4일 1월 2013 в 1:06
해설 (2)

다음은 사용 할 수 있는 방법 중 하나는 이 css

  • HTML *
<div class="imageWrapper">

    <a href="http://google.com" class="cornerLink">Link</a>
</div>​
  • CSS *
.imageWrapper {
    position: relative;
    width: 300px;
    height: 300px;
}
.imageWrapper img {
    display: block;
}
.imageWrapper .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper:hover .cornerLink {
    opacity: 0.8;
}
  • [데모] [1] *

이 경우 또는 그냥 왼쪽 하단에 있는:

  • [데모] [2] *
해설 (5)