Question

是否可以通过鼠标悬停在唯一匹配标签为title和alt的链接上显示图像？

我的CMS只能为2个完全分隔的元素生成匹配的标题和alt标记。它大致如下：

<a href="#" title="aubergine">hover this to show image</a>

<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

我已经能够像这样定位img：

$('a').mouseover(function() {
$('[alt="aubergine"]').css( "opacity", "100" );
});

但不是特定目标[alt="aubergine"]，我必须通过[alt="title of this link i just hovered"]获取图片。

到目前为止，这是一个工作原型的小提琴： https://jsfiddle.net/82xnqu6j/1/

Answer 1

使用jQuery提取当前元素的title属性，如下面的实例中所示。

通过这种方式，您可以对所有匹配的链接进行概括。

直播示例：

$('a').mouseover(function() {
  $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "1" );
});

$('a').mouseout(function() {
  $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "0" );
});

img {opacity:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="aubergine">hover this to show image</a>

<img width="100" height="100" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

JSFiddle版本：https://jsfiddle.net/82xnqu6j/4/

Answer 2

只需尝试从链接获取实际标题并将其用作选择器的一部分

    $('a').mouseover(function() { 
        $('[alt="'+this.title+'"]').css( "opacity", "100" );
    });

这适用于任何属性，例如title，src，href等。

在http://www.w3schools.com/cssref/sel_attribute_value.asp

中查看w3schools页面

Answer 3

您可以使用<!DOCTYPE html> <html> <head> <link href="index.css" rel="stylesheet"> </head> <body> <nav> <div> <div id="logo">LOGO</div> </div> <div> <a href='http://www.se7enservice.com/' class="here">Home</a> <a href="/about.html" >About</a> <a href="/services.html" >Services</a> <a href="/pricing.html" >Pricing</a> <a href="/contact_us.html" >Contact Us</a> </div> <div> <a href="">Sign Up</a> <a href="">Sign In</a> </div> </nav> <section id="content"></section> <footer></footer> </body> </html>选择jQuery中元素的任何属性，与本机JavaScript中的body{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin: 0 !important; height: 100vh; width: 100vw; overflow: scroll; } nav{ display: -webkit-flex; display: flex; width: 100%; min-height: 60px; z-index: 999; position: fixed; background: #1E67CB; box-shadow: 0 1px 5px rgba(0,0,0,.6); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6); } nav>div{ text-align: center; -webkit-flex: 1; flex: 1; -webkit-align-self: center; align-self: center; } #logo{ display: -webkit-flex; display: flex; cursor: default; -webkit-align-self: center; align-self: center; margin-left: 1em; color: #fff; font-weight: bold; font-size: 1.15em; line-height: 1.43; -webkit-font-smoothing: antialiased; font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; } nav>div{ width: 50vw; display: -webkit-flex; display: flex; } nav>div:nth-of-type(1){ -webkit-justify-content: flex-start; justify-content: flex-start; } nav>div:nth-of-type(2){ -webkit-justify-content: center; justify-content: center; } nav>div:nth-of-type(3){ -webkit-justify-content: flex-end; justify-content: flex-end; } nav>div>a{ display: -webkit-flex; display: flex; -webkit-align-self: center; align-self: center; text-decoration: none; cursor: pointer; color: #fff; font-size: 1em; font-weight: 300; -webkit-font-smoothing: antialiased; font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial; margin: 0 .5em; padding: 0.6em 1.5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: background-color 100ms; -webkit-transition: background-color 100ms; transition: background-color 100ms; } nav>div>a:hover{ background: rgba(255,255,255,0.15); } nav>div>a:active{ -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } nav>div:nth-of-type(3)>a:nth-of-type(2){ background: rgba(255, 255, 255, 0.15); } nav>div>a:nth-of-type(2):hover{ background: rgba(255, 255, 255, 0.37); } #content{ display: -webkit-flex; display: flex; width: 100%; min-height: 200vh; } footer{ display: -webkit-flex; display: flex; width: 100%; min-height: 100px; bottom: 0; background: #5c5c5c; box-shadow: inset 0 1px 5px rgba(0,0,0,.6); -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6); }相同。

$(this).attr('title')

this.title

$('a').mouseover(function() {
  $('[alt="' + $(this).attr('title') + '"]').css("opacity", "100");
});

$('a').mouseout(function() {
  $('[alt="' + $(this).attr('title') + '"]').css("opacity", "0");
});

JQuery显示/隐藏具有匹配标题和alt标记的元素

3 个答案: