হভারে পাঠানো পাঠ্যটি বন্ধ করুন

আমার ডিভি ব্লকের মাঝখানে একটি ফন্ট সাইজ 80px রয়েছে। যখন আমি ডিভি ব্লকটি ধরে রাখি, তখন এটি নীল রঙের সাথে 1px থেকে 5px পর্যন্ত সীমানা আকার পরিবর্তন করবে তবে পাঠটি হ্রাস পাবে।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #ccc;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

.calendarday-number:hover {
  margin: 12px 2px;
}

.calendarday-container:hover {
  border: 5px solid #2e7ad1;
}

.add-day-ico {
  display: none;
  width: 21px;
  height: 21px;
  margin: 22px 0px;
  float: right;
}

.calendarday-container:hover .add-day-ico {
  display: block;
  margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
  
    0  

</div>
</div> </div>

Jsfiddle: http://jsfiddle.net/f0k6r9nb/

আমি ক্যালেন্ডারে-কন্টেইনারে মার্জিন পরিবর্তন করার চেষ্টা করেছি: হোভার। অ্যাড-দিন-ico কিন্তু এটি সমস্যাটির সমাধান করতে সাহায্য করে নি।

আপনি কি আমাকে একটি উদাহরণ প্রদর্শন করতে পারেন যে আমি কীভাবে হভারে পাঠানো পাঠটি বন্ধ করতে পারি?

ধন্যবাদ.

1
.calendarday- ধারক মধ্যে সীমানা: হভার এটি সরানোর কারণ হয়।
যোগ লেখক Mike Rodham, উৎস

5 উত্তর

সীমানাটির প্রস্থকে 1px থেকে 5px এ পরিবর্তন করা এবং অভ্যন্তরীণ অংশগুলিকে পুনঃসংখ্যা করা একটি বাস্তব সমাধান নয়। আপনি একটি অতিরিক্ত উপাদান ব্যবহার করতে পারেন, যার মধ্যে 5px স্বচ্ছ সীমানা রয়েছে এবং এটি হভারে 5x রঙিন সীমানাতে পরিবর্তন করুন।

অন্য সহজ সমাধান পরিবর্তে রূপরেখা ব্যবহার করতে হবে, কারণ এটি উপাদান মাত্রাগুলিতে যোগ করে না:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #ccc;
}

.calendarday-container:hover {
  outline: 5px solid #2e7ad1;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

.add-day-ico {
  opacity: 0;
  width: 21px;
  height: 21px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.calendarday-container:hover img {
  opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
  
    0  

</div>
</div> </div>
3
যোগ
প্রশ্ন অংশ না, কিন্তু এখানে আপনি যান। এটি আইকন ইমেজ একেবারে অবস্থান করার জন্য আরও জ্ঞান করে তোলে।
যোগ লেখক Daniel Sixl, উৎস
এই জন্য আপনাকে অনেক ধন্যবাদ কিন্তু আমি একটি হভার উপর ইমেজ প্রদর্শন করতে হবে। আপনি একটি হোভার উপর ইমেজ যোগ করতে পারেন দয়া করে? ধন্যবাদ!
যোগ লেখক Robert Jones, উৎস

হোভারে একটি সীমানা দেখানোর জন্য একটি সাধারণ পদ্ধতি হল অ-হোভার রাষ্ট্র স্বচ্ছ বা একটি রঙ যা পশ্চাদ্দেশের সাথে মিলিত হওয়ার সাথে সাথে সীমানাটির সাথে মিলে যাওয়া প্রস্থের সাথে মেলে।

এই ক্ষেত্রে, বিদ্যমান 1px সীমানা আছে। এখানে, আমি ধূসর সীমানা নীল পরিবর্তন করব, তারপর সীমানাটির অতিরিক্ত <�কোড> 4px যুক্ত করতে একটি অন্তর box-shadow ব্যবহার করব।

Note: I also removed some margin for .calendarday-number on hover so the number does not shift.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #ccc;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

/* 
.calendarday-number:hover {
  margin: 12px 2px;
}
*/

.calendarday-container:hover {
  border-color: #2e7ad1;
  box-shadow: inset 0 0 0 4px #2e7ad1;
}

.add-day-ico {
  display: none;
  width: 21px;
  height: 21px;
  margin: 22px 0px;
  float: right;
}

.calendarday-container:hover .add-day-ico {
  display: block;
  margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
  
    0  

</div>
</div> </div>
1
যোগ
আমি সত্যিই কি চাই এই জন্য আপনাকে অনেক ধন্যবাদ। সমস্যা এখন সমাধান করা হয়! :)
যোগ লেখক Robert Jones, উৎস

আপনি এই মত একটি ছদ্ম উপাদান ব্যবহার করতে পারেন। আমি অপ্রয়োজনীয় সিএসএসকেও বাদ দিয়েছি যা একে অপরের সাথে লড়াই করছে

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }

/* Normal */
.calendarday-container { 
        width: 150px; height: 150px; 
        position: relative; 
        display: flex; align-items: center; justify-content: center; 
}
.calendarday-container:after { 
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
        border: 1px solid #ccc; z-index: -1; 
}

.caldndarday-add        { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico            { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }

/* Hover FX */
.calendarday-container:hover:after                                      { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number        { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
        
                0  
</div>
</div> </div>
0
যোগ

এই যোগ করুন:

.calendarday-container {
        border: 5px solid transparent;
        outline: 1px solid #ccc;
        outline: none;
   }

.calendarday-container:hover {
        outline: none;
   }

এটা সরাও:

.calendarday-number:hover {
       margin: 12px 2px;
  }
0
যোগ

পাঠ্যটি হ্রাস পেয়েছিল কারণ, 1px থেকে সীমানা-প্রস্থ তে সীমানা-প্রস্থ বৃদ্ধি পেয়েছিল, যখন

আপনি রূপরেখা সম্পত্তি ব্যবহার করে বক্সের চারপাশে একটি রূপরেখা বজায় রাখতে পারেন এবং সীমানা: 5px কঠিন স্বচ্ছ থেকে সীমারেখাটি রাখতে পারেন: 5px কঠিন # 2e7ad1 সময় ঝুলে।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  outline: 1px solid #ccc;
  transition: all 0.3s;
  border: 5px solid transparent;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

.calendarday-container:hover {
  border: 5px solid #2e7ad1;
}

.add-day-ico {
  display: none;
  width: 21px;
  height: 21px;
  float: right;
}

.calendarday-container:hover .add-day-ico {
  display: block;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
  
    0  

</div>
</div> </div>

http://jsfiddle.net/Baliga/f0k6r9nb/21/

0
যোগ