Question

我有一组带有特定课程背景图片的链接。

a(href="some-url" style="background-image: image-url").location-thumb

我正在使用Jquery悬停功能检查哪个链接已悬停在＆amp;因此想要更改相邻列中的背景。我特别需要检查链接的href属性。

我需要if循环格式的语法，如下所示：

if(hovered link attribute = "www.google.com"){
      //proceed further
}

Answer 1

非常感谢您的回复。最后实现了代码，其中on＆amp;如果将鼠标悬停在带有链接的图像上，则会将不同的Google地图设置为iframe元素。

  $('a.location-thumb').hover(function(){  
    if($(this).attr("href") == "/2013/01/20/30-shali-tibba.html"){
      document.getElementById('iframe1').src = "https://www.google.com
      /maps/embed1"
    }
  }, function(){
      document.getElementById('iframe1').src = "https://www.google.com
      /maps/embed2"
  });

Answer 2

您可以使用attribute selector这样的内容：

$(document).ready(function() {
  $('a[href="#hover"]').hover(
    function() {
      $(this).css('background-image', 'url("http://lorempixel.com/300/300/nature")')
    }, function () {
      $(this).css('background-image', 'url("http://lorempixel.com/300/300/sports")')
    }
  )
})

a {
  display: block;
  background: url('http://lorempixel.com/300/300/sports') no-repeat center;
  width: 300px;
  text-align: center;
  line-height: 300px;
  font-weight: bold;
  font-size: 3em;
  color: white;
  text-shadow: 0 0 6px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#hover">Hover Me</a>

Answer 3

使用jQuery，您可以在用户悬停具有给定类的锚点时进行侦听，并检查其href属性是否与所需或所需的URL匹配，如果是，则执行任意逻辑。这是三个不同的样本。第一个检查锚是否指向特定URL。第二个检查链接中是否有某个字符串，第三个检查链接是否与数组中的一组URL匹配。

    //option 1 -the hovered link is an exact match to a string

      $("a.location-thumb").hover(function() {
      if ($(this).attr("href") === "http://www.google.com") {
        alert("Yes")
        //add whatever
        $("#some-id").css("background-color", "crimson");
      }
      }, function() {
    $("#some-id").css("background-color", "orange");
  /*this is called when the user stops hovering*/});
        //option 2:  the hovered link includes a particular keywords in it

        $("a.location-thumb").hover(function() {
        if ($(this).attr("href").indexOf("google.com") !== -1) {
        alert("Yes")

        }

        }, function() {/*mouseleave*/});

        //Option 3: the hovered link points to one of several websites
        var urls = ['http://www.google.com', 'http://facebook.com'];
        $("a.location-thumb").hover(function() {
        if (urls.indexOf($(this).attr("href")) !== -1) {
        alert("Yes")

        }

        }, function() {/*mouseleave*/});

使用Vanilla JavaScript，您可以执行以下操作：

      var specialAnchors = document.getElementsByClassName("location-thumb");
      for (var i = 0; i < specialAnchors.length;i++ ) {
        specialAnchors[i].addEventListener("mouseover", function() {
          var href = this.getAttribute("href");
          console.log("hi");
          console.log(href);
          if (href === "http://www.google.com") {
            alert ("Yes");
          }
        })

        specialAnchors[i].addEventListener("mouseleave", function() {
          alert("Mouse left this place");
        })
      }

检查悬停链接的href属性

3 个答案: