Question

我目前正在尝试创建一个投资组合网站，我需要帮助创建一个悬停效果（如here所示）整个项目（＆＃34;。 col＆＃34;）被遗弃了。

这显然要求我改变＆＃34; .title＆＃34;悬停上的文字，我尝试使用此网站上先前给出的一些JQuery解决方案（例如this），但我有问题，图像消失，而不是重新出现在MouseOut上。到目前为止，这是我的HTML和CSS的一个例子，请记住，我很大程度上是JQuery的初学者，如果这是一个愚蠢的问题，我提前道歉，提前感谢。

我也喜欢＆＃34; .title＆＃34;轻扫并查看项目＆＃34;刷卡，但应该在另一个问题中提出。

HTML

<div class="col span_1_of_3 span_1_of_2">
  <a href="projects/cms.html">
    <div class="projectImage">
      <div class="hovtext">Career Management System
          </div>
      <img src="img/7.png"/>
    </div>
    <div class="title">
      Career Management
    </div>
  </a>
</div>

CSS

.col {
    display: block;
    float:left;
    margin: 1% 0 6% 1%;
}
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
.projectImage {
    position: relative;
    width: 100%;
    bottom: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.col img {
    width: 100%;
}
.title {
    font-family: apercu;
    text-align: center;
    color: #000;
    font-size:26px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.hovtext {
    display:none;
    width: 65%;
    top: 30%;
    position: absolute;
    font-size: 40px;
    font-family: apercu;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    color: #5a2bf1;
    line-height: 1.2em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 4px solid;
}
.col:hover .hovtext {
    display: block;
}

Trialled JQuery：

$('.col').hover(
        function() {
            var $this = $(this); // caching $(this)
            $this.data('initialText', $this.text());
            $this.text("View Project");
        },
        function() {
            var $this = $(this); // caching $(this)
            $this.text($this.data('initialText'));
        }
    );

使用JQuery更改Div悬停的文本

0 个答案: