Question

正如你在www.thetotempole.ca/javascriptproject2/看到的那样，当我将鼠标悬停在我的桌面图像标签上时，我会弹出标题属性。而不是标题，我需要div。任何帮助将非常感激。谢谢你们！

HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<meta charset="utf-8">
<title>Arrays</title>
    <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
<style>
#tbl img {
    -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
}

#tbl td:hover img {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
td {text-align: center;}
</style>
</head>
<body>
  <center><table id="tbl" border="1">
         <tr>
            <th>Product Name</th>
            <th>Product Description</th>
            <th>Product Images</th>
         </tr>
  </table>
<script>
var products = [
  {
    name: "Apple",
    description: "It might be fruit, or it might be an iPhone",
    imageUrl: "images/apple.jpg",
    title: "www.apple.com/ca/iphone"
  }, {
    name: "Dell",
    description: "Buy this one online at dell.com",
    imageUrl: "images/dell.jpg",
    title: "www.dell.com/ca/p/laptops"
  }, {
    name: "IBM",
    description: "If you want a mainframe they still have some",
    imageUrl: "images/ibm.jpg",
    title: "oldcomputers.net/ibm5150.html"
  }, {
    name: "Toshiba",
    description: "Get a discount through SAIT (maybe)",
    imageUrl: "images/toshiba.jpg",
    title: "www.toshiba.com/us/computers"
  }, {
    name: "Atari",
    description: "Try a classic gaming machine",
    imageUrl: "images/atari.jpg",
    title: "www.nintendosforsale.com/"
  }, {
    name: "Commodore",
    description: "64k should be enough for anyone",
    imageUrl: "images/commodore.jpg",
    title: "http://oldcomputers.net/c64.html"
  }
];

var table = document.getElementById("tbl");
products.forEach(function(product) {
  var row = document.createElement("tr");
  row.appendChild(createCell(product.name));
  row.appendChild(createCell(product.description));
  row.appendChild(createImageCell(product.imageUrl, product.title));

  table.appendChild(row);
});

function createCell(text) {
  var cell = document.createElement("td");
  cell.innerText = text;
  return cell;
}

function createImageCell(url,title){
  var image = document.createElement("img");
  image.setAttribute("src", url);
  image.setAttribute("title",title);

  var cell = document.createElement("td");  
  cell.appendChild(image);
  return cell;
}

</script>
<script>
      // Table background color 
        $("tr:even").css("backgroundColor" , "yellow");
        $("tr:odd").css("backgroundColor" , "violet");      
        $("th").css("backgroundColor" , "green");
<!-- End of jquery styling -->
</script>
</center>
</body>
</html>

Answer 1

不太确定你需要做什么才能让div包围标题，但这个解决方案可能对你有所帮助，因为它可以让你按照自己的意愿设置标题。

<强> CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

演示http://jsfiddle.net/tDQWN/

Andres Ilich / steveax在How to change the style of Title attribute inside the anchor tag?

的回答

Answer 2

您可以在javascript的末尾使用此功能。

$('td:last-child').hover(function(){
    var link = $(this).find('img').attr('title')
    var div = $('<div class="tooltip"><a href="'+link+'">'+link+'</a>');;

  $(this).append(div);
  },function(){
  $('.tooltip').remove();
});

现在你所要做的就是设置div class tooltip（hovered'td'是他的父级）。

http://jsfiddle.net/v6tA8/16/

我想将图片标题标签更改为div标签

2 个答案: