Question

我有两个问题

1-隐藏默认标题attr

2-在attr标题中显示代码html（不是标签，而是结果）

我不能使用任何插件

只允许使用css和jquery（不是jquery-ui）

感谢您的帮助

/* Jquery */

$(document).ready(function(){
  
  var content = ' \
    <div class="title-inner"> \
      <h2>Lorem ipsum</h2> \
      <img src="https://placehold.it/200x200"> \
      <p>Quisque efficitur </p> \
    </div>';
  
  $('#link').attr('title', content);
})

/*CSS*/

.box{
  background-color: #f2f2f2;
  width: 50%;
  padding: 20px;
}
.box a{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  background-color: #ff6600;
  padding: 10px 30px;
  border: 1px solid #ff6600;
}
.box a:hover{
  color: #ff6600;
  background-color: transparent;
}
.box a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  margin-right: -20px;
  margin-top: 10px;
  z-index: 20;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Code HTML -->
<div class="box">
<a href="#" id="link" title="the title">Link</a>
</div>

<!-- this is the code to display in title attr-->
<!--
<div class="title-inner">
  <h2>Lorem ipsum</h2>
  <img src="https://placehold.it/200x200/ffff00/000000/?text=image-1" alt="image">
  <p>Quisque efficitur arcu a sollicitudin consectetur. Etiam sit amet dui id sem porttitor faucibus non vitae sem. Donec tortor metus, tincidunt vitae viverra eu, pharetra mattis ipsum</p>
</div>
-->

Answer 1

您只能将文字放入java.lang.IllegalStateException: attempt to re-open an already-closed object: SQLiteDatabase: /data/data/com.xyz/databases/My.db 07-16 17:37:04.264 20730-20730/com.xyz E/SQLiteLog: (5) database is locked 07-16 17:37:04.267 20730-20730/com.xyz E/SQLiteDatabase: Failed to open database '/data/data/com.xyz/databases/My.db'.，

title

但是您可以在没有引导程序的情况下悬停显示图像

CSS

var content = 'Your title content';
$('#link').attr('title', content);

HTML

div {
    display: none;
}

a:hover + div {
    display: block;
}

请参阅此链接

Using only CSS, show div on hover over <a>

如何在attr标题中显示代码html

1 个答案: